當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery ajax 和普通js ajax 笔记

發布時間：2023/12/10 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery ajax 和普通js ajax 笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

首先引用兩個js 文件

1 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 2 <script src="js/Common.js" type="text/javascript"></script>

html 代碼：

1 <body> 2 <div> 3 <input id="txtName" type="text" name="txtName" value="" /><br /> 4 <input id="txtPwd" type="password" name="txtPwd" value="" /><br /> 5 <input type="button" id="btnLogin" name="btnLogin" value="登陸" /> 6 <input type="hidden" name="name" value="3" /> 7 <span id="span"></span> 8 </div> 9 </body>

普通的js ajax 效果代碼：

jquery 的ajax 實現方法：

1 $(document).ready(function () { 2 3 $("#btnLogin").click(function () { 4 $.ajax({ 5 type: "POST", 6 url: "Login.aspx", 7 dataType: "html", 8 data: { 9 name: $("#txtName").val(), 10 pass: $("#txtPwd").val() 11 }, 12 success: function (data) { 13 //將返回的json數據轉換一下 14 var obj = eval("(" + data + ")"); 15 //alert(obj.data); 16 if (obj.data == "1") { 17 //alert("登陸成功"); 18 $("#span").text("登陸成功！"); 19 //document.getElementById('span').innerHTML = '登陸成功'; 20 } 21 else { 22 $("#span").innerHTMl = '登陸失敗！'; 23 } 24 }, 25 error: function () { 26 alert("出錯了"); 27 } 28 }); 29 }); 30 });

后臺的方法處理：

1 protected void Page_Load(object sender, EventArgs e) 2 { 3 if (!string.IsNullOrEmpty(Request.Form["name"])) 4 { 5 string UserName = Request.Form["name"]; 6 string UserPwd = Request.Form["pass"]; 7 if (UserName == "123" && UserPwd == "123") 8 { 9 Response.Write("{'data':'1'}"); 10 } 11 else 12 { 13 Response.Write("{'data':'2'}"); 14 } 15 Response.End(); 16 } 17 }

轉載于:https://www.cnblogs.com/zhaozhengyan/archive/2012/06/07/2576066.html

總結

以上是生活随笔為你收集整理的jQuery ajax 和普通js ajax 笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

编程问答

jQuery ajax 和 普通js ajax 笔记

總結

jQuery ajax 和普通js ajax 笔记