jquery异步请求数据的三种方式_jquery异步请求资源-CSDN文库

共12个文件

cs：3个

js：2个

aspx：2个

jquery

异步请求数据

3星 · 超过75%的资源需积分: 49 72 浏览量 2010-12-20 01:27:38 上传评论 1 收藏 58KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

ajax2.rar （12个子文件）

css

jqModal.css 1KB

App_Code

WebServicetest.cs 2KB

ajax.suo 12KB

Web.config 253B

jmodel.aspx 6KB

ajax.htm 4KB

WebServicetest.asmx 101B

Default.aspx 104B

Default.aspx.cs 3KB

jquery-1.4.4.js 179KB

jqModal.js 3KB

jmodel.aspx.cs 278B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>jQuery Ajax 实例演示</title> </head> <script src="js/jquery-1.4.4.js" type="text/javascript"></script> <script language="javascript"> $(document).ready(function () { $('#send_ajax').click(function () { var params = $('input').serialize(); //序列化表单的值 $.ajax({ type: "POST", contentType: "application/json;charset=utf-8", url: "WebServicetest.asmx/HelloWorld", data: "{username:'cccc'}", dataType: "json", success: function (data) { alert(data); alert(data.d); var json = null; json = eval('(' + data.d + ')') alert(json.username); }, beforeSend: function(x) { x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); }, error: function(x, e) { alert(x.responseText); }, complete: function(x) { alert(x.responseText); } }); }); //$.post()方式： $('#test_post').click(function () { $.post("Default.aspx", { username: "lulu" }, function (data, textStatus) { var json = null; json = eval('(' + data + ')'); alert(json.username); // data 可以是 xmlDoc, jsonObj, html, text, 等等. //this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this // alert(data.username); }); }); //$.get()方式： $('#test_get').click(function () { $.get( 'Default.aspx', { username: $("#input1").val(), age: $("#input2").val(), sex: $("#input3").val(), job: $("#input4").val() }, function (data) //回传函数 { var json = null; json = eval('(' + data + ')'); alert(json.username); // $("#result").html(json.username); } ); }); }); function update_page(json) //回传函数实体，参数为XMLhttpRequest.responseText { alert(json); // var str = "姓名:" + json.username + "<br />"; //// str += "年龄:" + json.age + "<br />"; //// str += "性别:" + json.sex + "<br />"; //// str += "工作:" + json.job + "<br />"; //// str += "追加测试:" + json.append; // $("#result").html(str); } </script> <body> <div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div> <form id="formtest" action="" method="post"> <p><span>输入姓名:</span><input type="text" value="aa" name="username" id="input1" /></p> <p><span>输入年龄:</span><input type="text" value="bb" name="age" id="input2" /></p> <p><span>输入性别:</span><input type="text" value="cc" name="sex" id="input3" /></p> <p><span>输入工作:</span><input type="text" value="dd" name="job" id="input4" /></p> </form> <button id="send_ajax">提交</button> <button id="test_post">POST提交</button> <button id="test_get">GET提交</button> </body> </html>

评论收藏

内容反馈