按 button 時，使用 JQuery 的 Ajax 傳資料給後端

最近工作上遇到了要把 CLP 的畫面改成使用 WEB
然後也第一次使用 JQuery 跟 Ajax

環境是 Visual Stuido 以及 Web 空白專案
前端是使用 aspx 但是使用 html 以及 javascript
後端是使用 ashx

建立 ASP.NET 專案 選擇空白
然後在專案中右鍵-加入-Web 表單

前端 html

1
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="testajax.test" %>
2
3
<!DOCTYPE html>
4
5
<html xmlns="http://www.w3.org/1999/xhtml">
6
<head runat="server">
7
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8
    <title></title>
9
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
10
</head>
11
<body>
12
    <form id="form1" runat="server">
13
        <div>
14
            <!DOCTYPE html>
15
            <input type="text" id="txtName"/>
16
            <input type="button" id="btnName" value="按鈕"/>
17
        </div>
18
    </form>
19
</body>
20
</html>

前端 javascript

1
<script>
2
       document.querySelector('#btnName').addEventListener('click', function () {
3
           $.ajax({
4
               type: "GET",
5
               url: "test.ashx",
6
               contentType: "text/html",
7
               dataType: "html",
8
               data: {
9
                   name: document.querySelector('#txtName').value.toString()
10
               },
11
               success: function (data) {
12
                   if (data != "") {
13
                       alert(data);
14
                   }
15
               },
16
               error: function (data) {
17
                   alert("錯誤");
18
               }
19
           });
20
       });
21
   </script>

type: 請求方式 POST/GET
url: 指定要進行呼叫的位址
也可以是專案中的檔案
contentType: 傳送資料至 Server 的編碼類型
dataType: 預期 Server 傳回的資料類型
xml: 傳回可用 jQuery 處理的 XML
html: 傳回 HTML
sctip: 傳回可執行的 JavaScript
json: 傳回 JSON
jsonp: 在 URL 加上 callback=? 參數，並在 Server 端配合送回此 jsonp callback
text: 傳回純文字字串
success: 請求成功時執行函式
error: 請求發生錯誤時執行函式

然後在專案中右鍵-加入-泛型處理常式

後端 ashx

1
public void ProcessRequest(HttpContext context)
2
       {
3
           if (context.Request.QueryString["name"] != "")
4
           {
5
               string name = context.Request.QueryString["name"];
6
               context.Response.Write("歡迎" + name);
7
           }
8
           else
9
           {
10
               context.Response.Write("請問你是?");
11
           }
12
       }