当前位置：搜档网 › jquery_2.3 Ajax操作新

jquery_2.3 Ajax操作新

1.jQueryAjax 编程

1.1. 通过需求回顾Ajax编程

1.1.1.需求：验证用户名是否有效

需求：添加用户名的离焦校验

html代码

JS代码：

服务端代码：

问题：如何将responseText 的json格式字符串，转换为JS对象。

eval(“(”+ responseText+”)”);

1.2. jquery Ajax的开发

jquery提供了6个编写ajax的方法，分成三组：

第一组：$.ajax 是jquery提供最基本ajax编程方法，功能强大，代码复杂

第二组：为了简化$.ajax编程，提供了load、$.get、$.post(重点)

第三组: $.getScript 和$.getJSON 实现ajax的跨域请求

1.2.1.$.ajax 的使用

$.ajax(options) 是底层级AJAX函数的语法，功能强大

语法格式：

$.ajax({

type: "POST GET", // http请求方式

url: "请求地址",

data: "name=John&location=Boston", // 发送给服务器的数据

dataType：””, //预期服务器返回的数据类型。如果不指定，jQuery 将自动根据HTTP 包MIME 信息来智能判断

jsonp:callback // 解决跨域问题

success: function(){...} // 成功回调函数

});

需求：$.ajax改写用户名离焦校验

JS代码：

1.2.2.load的使用

Load的语法：jquery对象.load(url, param ,callback)

?url 访问服务器地址

?param 发送给服务器参数

?callback 当正常返回后执行回调函数

如果param存在，以POST方式请求，如果param 不存在，以GET方式请求需求：load改写用户名离焦校验，Ajax校验用户名是否合法

JS代码：

1.2.3.$.get和$.post的使用

语法：

$.get(url, param, callback, type)

$.post(url, param, callback, type)

?url 请求服务器的地址

?param 发送给服务器参数

?callback 服务器返回客户端执行success函数，接收data参数（服务器返回数据）

?type 指定服务器返回数据格式，如果不指定，使用response响应contextType自动

识别

案例: 点击链接获取服务器端数据

HTML代码：

JS代码：

将list对象转成xml

服务器servlet代码：

JS代码：

$(function(){

$("#showProducts").click(function(){

// 向服务器索要数据语法： $.get(url, param, callback, type)

$.get("${pageContext.request.contextPath}/demo2",function(data){

https://www.sodocs.net/doc/1c11547618.html,(data);

// 将data封装成table，追加到页面中

var $table = $("

产品名称

产品价格

$(data).find("product").each(function(){

var name = $(this).children("name").text();

var price = $(this).children("price").text();

// 将产品信息封装到tr中

var $tr = $("" + name + "" + price + "");

// 在table中追加tr

$table.append($tr);

});

// 清空div中的内容

$("#result").empty();

// 在id=result的div中追加 table

$("#result").append($table);

});

1.2.4.serialize 和serializeArray 方法使用

问题：如何将form的数据以Ajax方式发送到服务器

通过serialize 方法，将form参数转换name=value&name=value 格式

html代码：

需求：

将form的数据以Ajax方式发送到服务器

1.2.5.综合案例：省市区三级联动html代码：

// 当省变化时加载市

$("#s1").change(function(){

// 清空市

$("#s2").empty();

$("#s2").append("");

// 清空区县

$("#s3").empty();

$("#s3").append("");

var code1 = $(this).val();

$.post("${pageContext.request.contextPath }/demo1",{"pid":code1},fun ction(data){

$(data).each(function(){

//https://www.sodocs.net/doc/1c11547618.html,(this.cityName);

var cityname = this.cityName;

var codeid = this.codeid;

// 将城市名称和城市id组装成option

var $option = $("");

// 在省的select后面追加option

$("#s2").append($option);

});

// 当市变化时加载区县

$("#s2").change(function(){

// 清空区县

$("#s3").empty();

$("#s3").append("");

var code1 = $(this).val();

$.post("${pageContext.request.contextPath }/demo1",{"pid":code1},fun ction(data){

$(data).each(function(){

//https://www.sodocs.net/doc/1c11547618.html,(this.cityName);

var cityname = this.cityName;

var codeid = this.codeid;

// 将城市名称和城市id组装成option

var $option = $("");

// 在区县的select后面追加option

$("#s3").append($option);

});

优化以后的代码：

$(function(){

// 初始化省

loadArea(0,"s1");

// 当省变化时加载市

$("#s1").change(function(){

// 清空市

$("#s2").empty();

$("#s2").append("");

// 清空区县

$("#s3").empty();

$("#s3").append("");

var code1 = $(this).val();

loadArea(code1,"s2");

});

// 当市变化时加载区县

$("#s2").change(function(){

// 清空区县

$("#s3").empty();

$("#s3").append("");

var code1 = $(this).val();

loadArea(code1,"s3");

});

function loadArea(pid, sid) {

$.post("${pageContext.request.contextPath }/demo1",{"pid":pid},funct ion(data){

$(data).each(function(){

//https://www.sodocs.net/doc/1c11547618.html,(this.cityName);

var cityname = this.cityName;

var codeid = this.codeid;

// 将城市名称和城市id组装成option

var $option = $("");

// 在省的select后面追加option

$("#" + sid).append($option);

});

}

练习：

1、重点练习Ajax

AJAX 用法

Load 用法

GET 解析JSON案例

POST 解析XML 案例

2、DOM 练习全选、select移动

3、区分事件绑定和事件委派区别

4、事件默认动作阻止和事件传播阻止

jQuery Ajax 全解析(.ajax .post .get)

jQuery Ajax 全解析【.ajax .post .get】 1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("https://www.sodocs.net/doc/1c11547618.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求参数： url (String) : 发送请求的URL地址.

jquery+ajax

jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("https://www.sodocs.net/doc/1c11547618.html,/yeer/archive/2009/06/10/1500682.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。

jQuery 5种调用AJax的方法

jQuery 如何调用AJax（五种方法）方法一：load() 使用load方法可以帮助你加载非本地的HTML页面，并注入到当前调用的DOM中。 $.ajaxSetup({ cache: false }); var ajax_load = ""; var loadUrl = "ajax/load.php"; $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl);

}); cache: false 的意思是让浏览器不执行缓存功能，这样的话页面的内容将实时更新，否则某些浏览器会出现内容不更新的问题，当点击按钮后，因为加载过程需要时间，所以这里我们先使用.html方法来添加一个”加载中”的图片，然后执行load方法。高级使用方法： 1. 加载页面某一部分例如只加载ID为”pic”的部分，代码如下： $("#load_button").click(function() { $("#result").html(ajax_load).load(loadUrl + " #pic"); }); 2. 递交参数执行页面加载

可以给load方法添加GET或者POST参数，代码如下： $("#load_get").click(function() { $("#result").html(ajax_load).load(loadUrl, "page=0&size=10"); }); $("#load_post").click(function() { $("#result").html(ajax_load).load(loadUrl, { page: 0, size: 10 }); }); 3. 添加回调函数回调函数可以让你在结束AJAX调用后调用该函数，比如在页面load后提示用户加载完毕：

jQuery中的Ajax几种请求方法

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("[url]https://www.sodocs.net/doc/1c11547618.html,/QLeelulu/archive/2008/03/30/1130270.html[/url] .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求参数： url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据，以Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例代码： $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图

jQuery+AJAX+JSON

jQuery 1. 什么是jQuery?? jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript类库。 jQuery的核心理念是Write less，Do more。使用jQuery可以兼容各种浏览器，方便的处理HTML、Events、动画效果等，并且方便的为网站提供AJAX交互。 2.jQuery的特点：利用选择器来查找要操作的节点，然后将这些节点封装成一个jQuery对象，通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。好处：a、兼容性更好；b、代码更简洁 3.编程步骤： step1、使用选择器查找节点 step2、调用jQuery的属性和方法 4.jQuery对象与DOM对象之间的转换 1. 什么是jQuery对象？？ jQuery对象是jQuery对底层对象的一个封装，只有创建了这个对象，才能使用类库中提供的方法。 2. DOM对象 ----> jQuery对象 DOM对象向jQuery对象的转变很容易，外面追加$和圆括号即可。 function f( ){ var obj = document.getElementById(‘d1’); //DOM -> jQuery对象

var $obj = $(obj); $obj.html(‘hello jQuery’); } 3. jQuery对象 ----> DOM对象 jQuery对象向DOM对象转化，通过调用get方法加参数值0即可$obj.get(0)。 function f( ){ var $obj = $(‘#d1’); //jQuery对象 -> DOM var obj = $(obj).get (0); obj.innerHTML = ‘hello jQuery’; } 5. jQuery选择器 1. 什么是jQuery选择器？？ jQuery选择器是一种类似CSS选择器的特殊说明符号，能够帮助jQuery 定位到要操作的元素上，使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。 2. 选择器的种类 a、基本选择器 #id根据指定的ID匹配一个元素 .class根据指定的类匹配一个元素 element根据的指定的元素名匹配所有的元素

jquery_2.3 Ajax操作新

1.jQueryAjax 编程 1.1. 通过需求回顾Ajax编程 1.1.1.需求：验证用户名是否有效需求：添加用户名的离焦校验 html代码 JS代码：服务端代码：

jquery里面Ajax几种不同的调用方法

深圳网站建设：https://www.sodocs.net/doc/1c11547618.html, jquery 里面Ajax 几种不同的调用方法我们经常会使用ajax 去调用我们的.net 里面的ashx 去实现无刷新调用数据的方法，下面我们就来讲一下我们常用的几种方法。第一种方法是load 方法，下面是我们的代码 //url.ashx 是调用的地址，data 是返回的信息 $(".div").load("url.ashx", function (data){ //得到的信息 }); //url.ashx 是调用的地址，data 是返回的信息，type 是参数类型，有post ，与get 两种，datatype 是返回参数的类型，id 是传入的参数第二种方法就是$.ajax 方法，代码如下 $.ajax({ url: "url.ashx", type: "GET", dataType: "json", data: { id: "1" }, success: function (data) { //得到的信息 } }); //url.ashx 是调用的地址，data 是返回的信息，id 是传入的参数第三种方法就是$.get 方法，代码如下 $.get("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 }); //url.ashx 是调用的地址，data 是返回的信息，id 是传入的参数第四种方法就是$.post 方法，代码如下 $.post("url.ashx", { id: "1"}, function (data, textStatus){ //得到的信息 });

jquery ajax实现跨域请求的方法

这篇文章主要介绍了jquery+ajax实现跨域请求的方法,详细介绍了前台及后台的处理方法,是非常实用的技巧,需要的朋友可以参考下本文实例讲述了jquery+ajax实现跨域请求的方法。分享给大家供大家参考。具体实现方法如下：说明：这里的datatype 为jsonp ；type 只能为get 前台请求代码如下：代码如下: $.ajax({ type: get, url: , datatype: jsonp, jsonp: jsoncallback, success: function (result) { alert(result.success); alert(result.content); }, error: function (result, status) { //处理错误 } }); 后台处理代码validaccountsexists.aspx如下：代码如下: string accounts = gamerequest.getquerystring(accounts); string jsoncallback = gamerequest.getquerystring(jsoncallback); response.contentencoding =system.text.encoding.utf8; response.contenttype = application/json; response.write(jsoncallback + ({\success\:\true\,\content\:\ + accounts + \})); response.end(); 希望本文所述对大家的jquery程序设计有所帮助。

jQuery调用AJAX异步操作超清晰教程

JQUERY AJAX异步操作详细说明 AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和XML）。它并非一种新的技术，而是以下几种原有技术的结合体。 1)使用CSS和XHTML来表示。 2)使用DOM模型来交互和动态显示。 3)使用XMLHttpRequest来和服务器进行异步通信。 4)使用javascript来绑定和调用。通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型： 1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。 2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。“按需取数据”也降低了服务器的压力。 3)不需要使用隐藏或内嵌的框架。在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(标签)。下面介绍下AJAX中的重要对象：XMLHttpRequest。 XMLHttpRequest对象(XHR) XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。 XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX 对象实现。而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。 API描述客服端请求 open(method,url,a sync, bstrUser, bstrPassword)规定请求的类型、URL 以及是否异步处理请求。 1)method：请求的类型，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 2)url：请求的URL地址，可以为绝对地址也可以为相对地址。 3)async[可选]：true（默认，异步）或 false（同步）。注释：当您使用async=false 时,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。此时，不需要编写onreadystatechange回调函数，把代码放到send() 语句后面即可。</p><h2>jQuery ajax - ajax() 使用方法和示例</h2><p>实例<br>通过 AJAX 加载一段文本： jQuery 代码： $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"https://www.sodocs.net/doc/1c11547618.html,",async:false}); $("#myDiv").html(htmlobj.responseText); }); });<br>HTML 代码： <div id="myDiv"><h2>321 导航</h2></div> <button id="b01" type="button">https://www.sodocs.net/doc/1c11547618.html,</button><br>亲自试一试<br>定义和用法<br>ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax() 可以不带任何参数直接使用。注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。语法<br>jQuery.ajax([settings])<br>参数 settings<br>描述可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。<br>参数 options 类型：Object<br><br></p><p>可选。AJAX 请求设置。所有选项都是可选的。 async 类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 beforeSend(XHR) 类型：Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。 cache 类型：Boolean 默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。 jQuery 1.2 新功能。 complete(XHR, TS) 类型：Function 请求完成后回调函数 (请求成功或失败之后均调用)。参数：XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。 contentType 类型：String 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。 context 类型：Object 这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。<br><br></p><h2>jq方法大全</h2><p>JQ方法大全网友：linuxphpmysql 发布于：2008.10.22 08:58(共有条评论) 查看评论| 我要评论 Dom： Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title", function() { return this.src }); 给某个元素添加属性/值 $("元素名称").html(); 获得该元素内的内容（元素，文本等） $("元素名称").html("new stuff"); 给某元素设置内容 $("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值 $("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为value $("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式$("input元素名称").val(); 获取input元素的值 $("input元素名称").val(value); 设置input元素的值为value Manipulation： $("元素名称").after(content); 在匹配元素后面添加内容 $("元素名称").append(content); 将content作为元素的内容插入到该元素的后面 $("元素名称").appendTo(content); 在content后接元素 $("元素名称").before(content); 与after方法相反 $("元素名称").clone(布尔表达式) 当布尔表达式为真时，克隆元素（无参时，当作true处理）$("元素名称").empty() 将该元素的内容设置为空</p><h2>JQuery中的AJAX详解</h2><p>JQuery中的AJAX详解目录(?)[-] load()方法 load(url,[data],[callback]) url为被加载的页面地址 data表示发送到服务器的数据，格式为key/value callback格式为：function(responseText,textStatus,XMLHttpRequest){ } //responseText:请求返回的内容 //textStatus:请求状态：success、error、notmodified、timeout这4种 //XMLHttpRequest:XMLHttpRequest对象 load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST 方式 [javascript]view plaincopyprint? 1.$("#div1").load( 2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass"，则表示获取jsp页面中类名为filterClass的全部元素 3.{ 4. name ：clf, age : 25 5.//经测试，变量名加引号、单引号、不加引号，后台都能取到值 6.//如果含有中文，必须用encodeURI()进行编码，然后再服务器端用decodeURI()解码即可，如 7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()}, 8.}, //也可以用数组传值，{"attr []",["clf","25","male"]} 9.function (){ 10. $("#div2").text("AJAX"); 11.} 12.); [javascript]view plaincopyprint? 1.$("div").load("wrongname.xml",function(response,status,xhr){ 2.if (status=="success")</p><h2>jQuery操作Ajax和Json</h2><p>jQuery操作Ajax和Json 嗯，自己学SSH和做项目也已有两个月了。自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。当时我对于jQuery操作Ajax几乎不怎么了解，但是项目中有需求，所以自己也是必须要去使用，因此现在来详细讲解一下自己在项目中的操作。功能中，有一个下拉框，里面存储的是服务商的信息，首选项是“--请选择--”，当我选择第一个下拉框中服务商信息之后，后面紧接着将会得到这个选定的服务商下的所有产品。做一个联动操作。虽然我不会用jQuery操作Ajax，但是我第一反应就是想到利用这块技术，于是自己就开始查找对应的资料了。首先，我在Action中，将服务商的信息从数据库查找出来，保存到List集合中，将集合转发到JSP界面上，利用的是struts2标签： <div> <s:select name="provider.iscenicid"list="#request.providerList"listKey="i scenicid" listValue="szcenicname"headerKey=""headerValue="--请选择" onchange="onChangeOptionScenic(this)"id="scenicType"/></s:select> <span id="productInfo"></span> </div> （ps:其实这个里面，本不应该设置headerKey和headerValue，应该在Action中在List集合中去增加一行再进行操作。）中间的span标签就是将要利用jQuery操作Ajax把产品信息增加到span标签里面！其次，进行jQuery操作Ajax了： <script> function onChangeOptionScenic(_this) { // 获取下拉框中的listKey值 var iscenic =$(_this).val(); // 设置一个变量，来进行下面的操作 var htmltv ="";</p><h2>13.jQuery中ajax操作函数</h2><p><? jQuery中常用ajax函数简介 1. $().load(url,data,function); -----局部的方法 url:必须，可以带参数，此时为get方式传递，有data为post方式传递, data:json格式此时为post格式传递 function(response,status,xhr)：成功是执行的回调函数 response:返回的数据 status:"error","success" xhr:responseText/XML status,readyState,statusText->'OK'.. /* 这个函数是在前面选中的对象中显示 */ 2.$.get(url,data,function,type),$.post(url,data,function,type) $.get(): url:必须，可以带参数， data:可选，字符串或者是json对象 function(response,status,xhr):完成时返回的对象其中status有"success"或"error" type:返回内容的格式，xml,script,json,text,default 可选 //jQuery会智能判断加载类型,除非我们强制设置 $.post(): url:必须 data:可选，字符串或者是json对象 function(response,status,xhr):完成时返回的对象其中status有"success"或"error" type:返回内容的格式，xml,script,json,text,_default 可选 //jQuery会智能判断加载类型,除非我们强制设置, 对于json,js等最好设置下 3.$.getScript(url,callback),$.getJSON(url,data,callback); $.getScript():加载script $.getJSON(url,data,callback): url:必须;如果是跨域请求，则需要在末尾加上？callback=?;在服务器端 echo $_GET["callback"]."(json内容)"; data:传递的参数k/v类型 function(reponse,status,xhr):成功是执行的函数</p><h2>jQuery ajax异步请求</h2><p>此请求返回boolean值 $.ajax({ type : "POST", url : 'addRepetitionCaseID.action?sentencedtoheavyID='+pid+'&complId='+参数, success : function(exist){ if(exist == "false"){ }else{ } } }); 异步请求后生产select $.ajax({ type : "POST", dataType : "json", url :'<%=path%>/web/organization/org/findCorgByOrgSysType.action, success : function(result){ $("#id").empty(); if( result != null && result != "" ){ for(var i=0;i<result.length;i++){ if(gotoUnit!=null&&result[i].orgId == gotoUnit){ $("#SelectId").append("<option selected='selected' value='"+result[i].orgId+"'>"+result[i].orgName+"</option>"); }else{ $("#gotoUnit").append("<option value='"+result[i].orgId+"'>"+result[i].orgName+"</option>"); } textareaChang(); } }else{ $("<option value=''>请选择...</option>").appendTo("#gotoUnit"); } } }); Flex请求加载 $('.flex').flexOptions({ url : 'listComplaintQuantityReport.action', newp : 1,</p><h2>JQuery中$.ajax()方法参数详解</h2><p>JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。 cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。 data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如 {foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery 将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为 &foo=bar1&foo=bar2。 dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache 参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery 将自动替换后一个</p><h2>jQuery使用Ajax方法调用WebService</h2><p>jQuery使用Ajax方法调用WebService 在这里将jQuery使用Ajax 调用WebService 的几个常用的方法做了一个整理，提供给正在找这方面内容的博友，希望能给学习jQuery的朋友一点帮助。代码直接复制即可。 ws.aspx 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.sodocs.net/doc/1c11547618.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.sodocs.net/doc/1c11547618.html,/1999/xhtml"> <head id="Head1" runat="server"> <title></title></p><p><script src="jquery.js" type="text/javascript"></script> <style type="text/css"> .hover { cursor: pointer; /*小手*/ background: #ffc; /*背景*/ } .button { width: 150px; float: left; text-align: center; margin: 10px; padding: 10px; border: 1px solid #888; } #dictionary { text-align: center; font-size: 18px; clear: both; border-top: 3px solid #888; } #loading { border: 1px #000 solid; background-color: #eee; padding: 20px; margin: 100px 0 0 200px; position: absolute; display: none;</p><h2>Jquery之Ajax(页面后台间数据交互)</h2><p>主题：Jquery之Ajax(页面后台间数据交互)内容部分 JSP页面表单数据通过Ajax,以json格式发送到后台处理，最后返回json对象，显示在页面上。原意就打算了解一下json格式数据的传递，没打算做的多复杂，但乱码问题搞得我头都大了。直接贴代码解释 JS文件 $("#register").click(function(){ var userFormTemp = $("form").serialize(); var userFormDecode = decodeURIComponent(userFormTemp,true); var userForm = encodeURI(encodeURI(userFormDecode)); $.ajax({ type : "post", url : "UserServlet", contentType: "application/x-www-form-urlencoded; charset=UTF-8", data : {user : userForm}, dataType : "json", success : function(data){ $("#uname").text(https://www.sodocs.net/doc/1c11547618.html,erName); $("#addr").text(data.address); $("#pho").text(data.phone); $("#hob").text(data.hobby); }, error : function(textStatus,e){ alert(e.status);</p><p>} }); }); 相关行解释： 1.var userFormTemp = $("form").serialize(); 学习Ajax时看到这个方法觉得有意思就拿来试验一下，serialize() 方法通过序列化表单值，创建URL 编码文本字符串。输出的格式为：name=value&name 1=value1&name2=value2... 类似于路径后面的参数列表。get方式提交也可以直接加到路径后面传送。ajax使用与寻常无异，就是数据类型改为json:dataType : "json"。 Form2Json文件因为要使用json格式传递数据，后台先将序列化表单后的字符串转换成json格式的字符串然后再装换成json对象。 public class Form2Json { public JSONObject string2Json(String stringForForm) throws Exception{ String form2Json[] = stringForForm.split("&"); String jsonForStringTemp = ""; for (int i=0;i<form2Json.length;i++){ int index = form2Json[i].indexOf("="); jsonForStringTemp += "\""+form2Json[i].substring(0, index)+"\"" +":"+"\""+URLDecoder.decode(form2Json[i].substring(index+1,for m2Json[i].length()),"UTF-8")+"\""+","; } String jsonForString = "{" + jsonForStringTemp +"}";</p> <div> <div>相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="5473098"><a href="/topic/5473098/" target="_blank">jquery的ajax常用方法</a></li> </ul> </div> </div> </div> </div> <div class="category"> <h2 class="navname">相关文档</h2> <ul class="lista"> <li><a href="/doc/3713501495.html" target="_blank">jq方法大全</a></li> <li><a href="/doc/4a15485002.html" target="_blank">JQuery中$.ajax()方法参数详解</a></li> <li><a href="/doc/a816260373.html" target="_blank">JQUERY之AJAX(页面后台间数据交互)</a></li> <li><a href="/doc/0412227195.html" target="_blank">jquery+ajax</a></li> <li><a href="/doc/d84224956.html" target="_blank">jquery的ajax常用方法</a></li> <li><a href="/doc/2410126440.html" target="_blank">jquery ajax实现跨域请求的方法</a></li> <li><a href="/doc/4d4293462.html" target="_blank">JQuery中的AJAX详解</a></li> <li><a href="/doc/712683584.html" target="_blank">JQueryAjax教程讲解</a></li> <li><a href="/doc/ca14107146.html" target="_blank">jquery ajax封装</a></li> <li><a href="/doc/19799955.html" target="_blank">jQuery+AJAX+JSON</a></li> <li><a href="/doc/f113821049.html" target="_blank">用JQuery,ajax从数据库读取数据</a></li> <li><a href="/doc/3b4806267.html" target="_blank">jQuery ajax - ajax() 使用方法和示例</a></li> <li><a href="/doc/4e14240211.html" target="_blank">jQuery ajax异步请求</a></li> <li><a href="/doc/aa10236366.html" target="_blank">JQuery框架及Ajax技术练习</a></li> <li><a href="/doc/0e2345158.html" target="_blank">jQuery Ajax 全解析(.ajax .post .get)</a></li> <li><a href="/doc/d51236469.html" target="_blank">JQuery中常用的函数方法总结</a></li> <li><a href="/doc/231536840.html" target="_blank">jquery里面Ajax几种不同的调用方法</a></li> <li><a href="/doc/3915809928.html" target="_blank">Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结</a></li> <li><a href="/doc/751712767.html" target="_blank">jQuery Ajax 实例全解析</a></li> <li><a href="/doc/cd5599294.html" target="_blank">Jquery-ajax方法data参数用法的总结</a></li> </ul> <h2 class="navname">最新文档</h2> <ul class="lista"> <li><a href="/doc/0919509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0d19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9419184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3c19258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d619211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a219240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9e19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8f19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8619195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7819336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7b19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6a19035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4b19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3d19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2919396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2819396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1219338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/e819066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/b819159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "19974bbc7e21af45b207a8a0"; </script> <div class="footer"> <p>© 2013-2022 www.sodocs.net  <a href="/sitemap.html">站点地图</a> | <a href="/tousu.html" target="_blank">侵权投诉</a></p> <p><a href="https://beian.miit.gov.cn/">闽ICP备11023808号-8</a>  本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈<script type="text/javascript">tj();</script></p> </div> </div> </body> </html>