JQuery调用Webservice实现AJAX实现教程

作者：小菜更新时间：2025-03-16 点击数：

简介：前几天跟一个朋友在聊Web的AJAX时，很惊讶他的设计方法很原始,直接用的js直接调的.aspx,传参来取得结果实现局部刷新,个人感觉这样不好维护,也没有灵活性

【菜科解读】

前几天跟一个朋友在聊Web的AJAX时，很惊讶他的设计方法很原始,直接用的js直接调的.aspx,传参来取得结果实现局部刷新,个人感觉这样不好维护,也没有灵活性.

怎样能够做到灵活?可维护性强?

做一个小实例出来,也加强一下印象.

jQuery+Web service来实现:Web service作后台服务,用jQuery(js优秀框架)调此web service取得结果，如下是原理图:

现在开始演示一个实例,开发工具如下为:Visual studio S 2008+jQuery1.4.1

1.新建一项目:MyService

2.Web service后台代码如下:

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;namespace MyService{ /// /// Summary description for Service1 /// [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService]//此处需要设定为ScriptService类型,js才能够从web service取得值 public class Service1 : System.Web.Services.WebService { [WebMethod] public string GetMessage(string name) { return "Hello,"+name; } [WebMethod] public List GetMembers() { List personList = new List(); personList.Add("AGAN"); personList.Add("MS"); personList.Add("ZURI"); personList.Add("JILI"); personList.Add("Who are you!"); return personList; } [WebMethod] public string GetYourAge(string name) { int age = 0; switch(name.ToUpper()){ case "AGAN": age = 18; break; case "MS": age = 28; break; case "ZURI": age = 25; break; case "JILI": age = 23; break; default: age = 30; break; } return age.ToString(); } }}

注意在web.config中配置好默认文档Service1.asmx,否则IIS中测试会报错403的错误.

3.在项目解决方案中添加一Web setup项目MyServiceSetup,如下图:

右键点击MyServiceSetup安装包,有Install(安装),unInstall(卸载)点击即可发布到IIS中或中IIS移除.

浏览已发布的这个Web service可以看到已公开的这方个方法,如图所示:

现在我们来测试一下GetMambers()这个方法,如图:

点"调用"后结果如下:

这说明发布的这个Web service已没有问题,现在我们用jQuery来调这个服务来实现AJAX局部刷新的效果。

现在下载jQuery插件jquery-1.4.1.js

下载网址:http://www.cr173.com/soft/35464.html4. 建一个测试的项目来测试web service:TestMyService:

用js调用web service,一个按钮取得ArrayOfString中的列表数据,点击列表项调GetYourAge()方法取得某个人的相关信息(年龄),添加一html文件,把jquery-1.4.2.js把到js,

代码和jquery代码如下:

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestMyService._Default" %> Untitled Page script src="js/jquery-1.4.1.js" type="text/javascript"> /script script type="text/javascript"> function GetDataList() { $.ajax({ type:"POST", contentType:"application/json", url:"http://localhost/MyServiceSetup/Service1.asmx/GetMembers",//GetMembers是web service的方法名 data:"",//无参数类型 datatype:'json', success:function(result){ try{ $('#listMembers').empty(); $(result.d).each(function() {//遍历取得的结果 $("#listMembers").append("" + this + ""); }); }catch(e){ alert(e); } }, error: function(result, status){ if(status=='error'){ alert(result); } } }); } function GetAge(name) { $.ajax({ type:"POST", contentType:"application/json", url:"http://localhost/MyServiceSetup/Service1.asmx/GetYourAge",//GetYourAge是web service的方法名 data:"{name:'"+name+"'}",//name是参数名,跟web service的方法参数一致 datatype:'json', success:function(result){ try{ $("#lblAge").html(name+","+result.d+" Year's old.");//result.d是取得的值 }catch(e){ alert(e); } }, error: function(result, status){ if(status=='error'){ alert(result); } } }); } /script Members:

在IIS中测试结果如下图:

点击Get取得人名列表，如下图:

点击列表项的某个人名,即取得人员的相关信息(年龄),如下图所示:

现在一个简单的jquery调web service实例已完成了.

源代码如下:

测试源码TestMyServiceSample.rar

JQuery,调用,Webservice,实现,AJAX,教上一篇：windows系统配置phpMyAdmin图文教程下一篇：

使用jquery和MySql创建一个ajax关键词数据搜索

在web开发过程当中，我们经常需要在前台页面输入关键词进行数据的搜索，我们通常使用的搜索方式是将搜索结果用另一个页面显示，这样的方式对于搭建高性能网站来说不是最合适的，今天给大家分享一下如何使用 jQuery，MySQL 和 Ajax创建简单和有吸引力的Ajax 搜索，希望大家在开发项目的时候能够根据自己的实际情况灵活运用。

点击搜索默认显示所有的结果输入A之后显示的搜索结果输入 p之后显示的搜索结果没有找到相关的搜索词页面演示-点击下面的搜索按钮搜索数据文件结构主要用到几个文件 index.php首页 dbcon.php数据库连接文件 search.php搜索处理页面第一步创建一个ajax_search的数据库，紧接着创建一个ajax_search表CREATE TABLE `ajax_search` ( `id` int(11) NOT NULL auto_increment, `FirstName` varchar(50) NOT NULL, `LastName` varchar(50) NOT NULL, `Age` int(11) NOT NULL, `Hometown` varchar(50) NOT NULL, `Job` varchar(50) NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;HTML ：index.php--程序主页面DB Connect:dbcon.php--数据库连接文件 ?php //数据库连接函数 $link = mysql_connect(‘localhost‘, ‘root‘, ‘你的密码‘); mysql_select_db(‘ajax_demo‘,$link);//选择数据库连接?>搜索结果页面search.php代码如下 ?phpfunction checkValues($value) // 使用此函数对所有这些值都要检查防止 sql 注入和跨站点脚本 //除去字符串开头和末尾的空格或其他字符 $value = trim($value); // Stripslashes if (get_magic_quotes_gpc()) { //删除由 addslashes() 函数添加的反斜杠，该函数用于清理从数据库或 HTML 表单中取回的数据。

$value = stripslashes($value); //转换所有的 , 字符 $value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES))); // 剥去 HTML的标签 $value = strip_tags($value); // 引用值 $value = mysql_real_escape_string($value); return $value;include("dbcon.php");//加载数据库连接文件$rec = checkValues($_REQUEST[‘val‘]);//获取table内容if($rec) $sql = "select * from ajax_search where FirstName like ‘%$rec%‘ or LastName like ‘%$rec%‘ or Age like ‘%$rec%‘ or Hometown like ‘%$rec%‘"; $sql = "select * from ajax_search";$rsd = mysql_query($sql);//查询这条语句$total = mysql_num_rows($rsd);//返回结果集中行的数目if($total==0){ echo ‘No Record Found !‘;}?>checkValues函数过滤字符串防止sql注入和跨站点脚本攻击，mysql_query($sql);用来查询语句，mysql_fetch_assoc（）用来循环输出结果，怎么样是不是很简单，如果你的项目有需要，可以直接使用这个代码。

使用,jquery,和,MySql,创建,一个,ajax,关

基于jquery级联的下拉插件

下面就详细介绍一下这段代码：var defaultOptions = { after: null, before: null, usePost: false, defaultValue: null, filter: null, preValue: ‘-1‘, preText: ‘請選擇‘, groupSort: ‘desc‘, order: ‘name asc‘, params: {}, dataMap: {‘text‘: ‘text‘, ‘value‘: ‘value‘, ‘group‘: ‘group‘} };插件的默认参数配置after：select数据载入结束事件callbackbefore：数据载入前事件callbackusePost：ajax请求方式，默认为GETdefaultValue：默认选中的值filter：数据过滤函数，类似jq的grep方法，使用方式也是一样的，第一个参数为value，第二个参数为key或index，当返回值为false即过滤掉该条数据，如：filter: function(v, i) { return v.count > 1; }过滤数据中count属性小于1的数据preValue，preText：初始option的值和文字groupSort：分组optgroup排序方式order：数据的排序方式，排序字段与方向空格隔开params：随ajax请求传递的参数dataMap：数据属性映射，目的提高插件对数据的自适应性，如真实数据是name，id，year，则dataMap: { ‘text‘: ‘name‘, ‘value‘: ‘id‘, ‘group‘: ‘year‘ }；如果不使用分组功能，只需保留text和valuemissGroup：缺省分组名；dataToOption：用于将数据转换成option；mapData：将数据转成统一格式；groupData：将数据分组；这段实现逻辑略显冗长，因为实际项目中的需求多变，这个可根据实际需求简化一下代码。

$.fn.fillselect在dataReadyCallback中触发change事件主要目的是使此select的下一级生效；$.fn.chainselect多了一个target参数用于指向下一级的jq选择器。

那么现在来看下怎么使用，需求：厂牌brand->车款kind->车型model，ajax获取的数据格式为{status: 200, data: [{id: 1, name: ‘bmw‘}, {id: 2, name: ‘benz‘}]}；车型的数据需要根据year_name分组 $(‘#brand‘).chainselect(‘#kind‘, ‘/request_url‘, { ‘dataMap‘: {‘value‘: ‘id‘, ‘text‘: ‘name‘}, ‘preValue‘: -1, ‘preText‘: ‘選擇/車款‘, ‘params‘: {‘type‘: ‘_cache_kind‘}, ‘before‘: function() { this.attr(‘disabled‘, true); ‘after‘: function() { this.removeAttr(‘disabled‘); ‘defaultValue‘: lastKindId || -1 $(‘#kind‘).chainselect(‘#model‘, ‘/request_url‘, { ‘dataMap‘: {‘value‘: ‘myid‘, ‘text‘: ‘name‘, ‘group‘: ‘year_name‘}, ‘preValue‘: -1, ‘preText‘: ‘選擇/車型‘, ‘params‘: {‘type‘: ‘_cache_model‘}, ‘filter‘: function(v, i) { return $.inArray(v.myid, myids) === -1; ‘before‘: function() { this.attr(‘disabled‘, true); ‘after‘: function() { this.removeAttr(‘disabled‘); $(‘#brand‘).fillselect(‘/request_url‘, { ‘dataMap‘: {‘value‘: ‘id‘, ‘text‘: ‘name‘}, ‘preValue‘: -1, ‘preText‘: ‘選擇/廠牌‘, ‘params‘: {‘type‘: ‘_cache_brand‘}, ‘defaultValue‘: lastBrandId || -1 }); 基于,jquery,级联,的,下拉,插件,基于,jquery

加入收藏

上一篇：读卡器是什么？

下一篇：[word嵌入图片显示不全]如何解决？

返回列表