jquery 的 ajax 程式簡單的

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

瞭解ajax， json，ashx,例子是一個當你使用者名稱輸入使用者名稱，請求頁面進行比對處理例子很簡單但是讓初學者可以更好的理解query中的ajax

Javascript： Javascript代碼

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
function alertMsg()
{
var user={"id":"","pwd":""};
user.id= $("input:text").val();
user.pwd=$("input:password").val();
$.ajax({
url: "HandleAjax.ashx",//這裡的請求頁面建議大家使用ashx 一般處理常式相當於一個輕量級的aspx 這裡的對資料的處理沒有必要那麼大費周折的使用aspx,也算是對效能做了一點點小貢獻吧
data: "user="+user.id,
datatype: "json",//請求頁面返回的資料類型
type: "GET",
contentType: "application/json",//注意請求頁面的contentType 要於此處保持一致
success:function(data) {//這裡的data是由請求頁面返回的資料
alert(data.result);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("XMLHttpRequest");
}
});
}

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>     <script type="text/javascript">     function alertMsg()     {         var user={"id":"","pwd":""};         user.id= $("input:text").val();         user.pwd=$("input:password").val();                 $.ajax({                 url: "HandleAjax.ashx",//這裡的請求頁面建議大家使用ashx 一般處理常式 相當於一個輕量級的aspx 這裡的對資料的處理沒有必要那麼大費周折的使用aspx,也算是對效能做了一點點小貢獻吧                     data: "user="+user.id,                     datatype: "json",//請求頁面返回的資料類型                     type: "GET",                     contentType: "application/json",//注意請求頁面的contentType 要於此處保持一致                     success:function(data) {//這裡的data是由請求頁面返回的資料                         alert(data.result);                     },                     error: function(XMLHttpRequest, textStatus, errorThrown) {                         alert("XMLHttpRequest");                         }                 });      }

Html： Html代碼

<body>
使用者名稱：<input id="id" type="text" name="id" />
密碼：<input id="pwd" type="password" name="pwd" />
<input id="submit" type="button" name="sub" value="submit" onclick="alertMsg();" />
</body>

<body>     使用者名稱：<input id="id" type="text" name="id" />     密碼：<input id="pwd" type="password" name="pwd" />           <input id="submit" type="button" name="sub" value="submit" onclick="alertMsg();" /> </body>

請求頁面 ashx C#代碼

<%@ WebHandler Language="C#" Class="HandleAjax" %>
using System;
using System.Web;
public class HandleAjax : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "application/json";
if (context.Request["user"] == "jiayou")
{
string hello="OK";
context.Response.Write("{\"result\":\""+hello+"\"}");//注意格式”key”:”value” 這裡的格式我寫錯了好幾次才改正確的
}
else { context.Response.Write("{\"result\":\"Hello pig\""); }
}
public bool IsReusable {
get {
return false;
}
}
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More