Ajax（一）调用另一个页面后台进行异步传递

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Teacher.aspx.cs" Inherits="ajax传递_Teacher" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>    <script type="text/javascript" src="../../Scripts/jquery-3.4.1.js"></script>
 <script type="text/javascript" src="../Scripts/jquery-3.4.1.js"></script>

    <script>

        window.onload = function ()
        {
            console.log("show something");

        }
        
    </script>
      

    <script>

        $( function ()
        {

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

            
                var txtparam1 = $( "#txtParam1" ).val();                
                var txtparam2 = $( "#txtParam2" ).val();

                
                $.ajax({
                    url: "demo1.aspx/AjaxMethod",//发送到本页面后台AjaxMethod方法
                    type: "POST",
                    dataType: "json",
                    async: true,//async翻译为异步的，false表示同步，会等待执行完成，true为异步
                    contentType: "application/json; charset=utf-8",//不可少
                    data: "{param1:'" + txtparam1 + "',param2:'" + txtparam2 + "'}",
                    
                     
                    success: function (data) {
                        $("#result").html(data.d);
                    },
                    error: function ()
                    {

                        alert( "请求出错处理" );

                    }
                });


            } )

        } )

    </script>

         <script type ="text/javascript">

             $( function () { 
             $( "#btn2" ).click( function ()
             {
                 var param1 = $( "#txtParam1" ).val();

                 var param2 = $( "#txtParam2" ).val();

            
            
               
                 $.ajax( {


                     url: "demo1.aspx/AjaxMethod2",
                     type: "POST",
                     dataType: "json",
                     async: true,//async翻译为异步的，false表示同步，会等待执行完成，true为异步
                     contentType: "application/json; charset=utf-8",//不可少
                     data: "{name1:'" + param1 + "' ,name2:'" + param2 + "' }",
                     
                     success: function (data)
                     {

                         $( "#result" ).html( data.d );

                         console.log( data );

                        


                     }
                     
                                             
                     
                 } )
                    

             } )
    
             } )

            </script>
    
           
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
               参数1：<input type="text" id="txtParam1" value="" /><br />
        参数2：<input type="text" id="txtParam2" value="" /><br />
        <input type="button" id="btn1" value="提交"/><br />
         <input type="button" id="btn2" value="checkBox提交"/><br />
        <div id="result"></div>

     


        
   <input name="funItem" value="1" checked="checked" type="checkbox" />c#
   <input name="funItem" value="2" type="checkbox" />html
   <input name="funItem" value="3" type="checkbox" />javascript


    </div>
    </form>
</body>
</html>

后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

public partial class ajax传递_demo1 : System.Web.UI.Page
{


    [System.Web.Services.WebMethod()]


    public static string AjaxMethod(string param1, string param2)
    {

        return "参数1为：" + param1 + "，参数2为：" + param2;


    }

    [System.Web.Services.WebMethod()]
    public static string AjaxMethod2 (string name1,string name2 )
    {

        return "参数1为：" + name1 + "，参数2为：" + name2;







    }


    protected void Page_Load(object sender, EventArgs e)
    {

                    
        

    }
}

_速冻

发布了251 篇原创文章 · 获赞 42 · 访问量 5万+

私信关注

Ajax（一） 调用另一个页面后台进行异步传递

后台

猜你喜欢

Ajax（一）调用另一个页面后台进行异步传递