zoukankan      html  css  js  c++  java
  • C#中jQuery Ajax实例(一)

    目标:在aspx页面输入两参数,传到后台.cs代码,在无刷新显示到前台

    下面是我的Ajax异步传值的第一个实例

    1.前台html代码:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Ajax实例1</title>
        <script src="Scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            $(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>
    </head>
    <body>
        <form id="form1" runat="server">
            参数1:<input type="text" id="txtParam1" value="" /><br />
            参数2:<input type="text" id="txtParam2" value="" /><br />
            <input type="button" id="btn1" value="提交"/><br />
            <div id="result"></div>
        </form>
    </body>
    </html>

    2.后台代码:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace AjaxDemo
    {
        public partial class demo1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
            }
    
            //type方式必须是post,方法必须是静态的,方法声明要加上特性[System.Web.Services.WebMethod()],传递的参数个数也应该和方法的参数相同。
            [System.Web.Services.WebMethod()]
            public static string AjaxMethod(string param1, string param2)
            {
                return "参数1为:"+param1+",参数2为:"+param2;
            }
        }
    }

    3.运行效果:

    4.输入数据,点击提交后:

     5.注意:

    第1步中contentType: "application/json; charset=utf-8"这句不可少!不设置这个,json也是返不回来的

    当然,你也可以如下这种Post传值格式写:

    var data={"name":"Tom","age":"20"};
    var url="XXX.ashx"
    $.post(url,data,function (){alert("ok!")});
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 字符串逆序
    Java实现 蓝桥杯VIP 算法训练 字符串逆序
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 最长字符串
    Java实现 蓝桥杯VIP 算法训练 成绩的等级输出
    Java实现 蓝桥杯VIP 算法训练 成绩的等级输出
    Qt 自定义model实现文件系统的文件名排序
  • 原文地址:https://www.cnblogs.com/qk2014/p/4438693.html
Copyright © 2011-2022 走看看