zoukankan      html  css  js  c++  java
  • JQuery以JSON方式提交数据到服务端

      JQuery将Ajax数据请求进行了封装,从而使得该操作实现起来容易许多。以往我们要写很多的代码来实现该功能,现在只需要调用$.ajax()方法,并指明请求的方式、地址、数据类型,以及回调方法等。下面的代码演示了如何将客户端表单数据封装成JSON格式,然后通过JQuery的Ajax请求将数据发送到服务端,并最终将数据存储到数据库中。服务端定义为一个.ashx文件,事实上你可以将服务端定义为任何能接收并处理客户端数据的类型,如Web Service,ASP.NET Page,Handler等。

      首先,在客户端,通过JavaScript脚本将页面表单数据封装成JSON格式。GetJsonData()函数完成了这一功能。然后我们通过$.ajax()方法将数据发送到服务端的RequestData.ashx。其中用到了JSON.stringify()方法,它可以将客户端发送的JSON数据对象进行序列化操作,详细的内容可以看这里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

    $("#btnSend").click(function() {
        $("#request-process-patent").html("正在提交数据,请勿关闭当前窗口...");
        $.ajax({
            type: "POST",
            url: "RequestData.ashx",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(GetJsonData()),
            dataType: "json",
            success: function (message) {
                if (message > 0) {
                    alert("请求已提交!我们会尽快与您取得联系");
                }
            },
            error: function (message) {
                $("#request-process-patent").html("提交数据失败!");
            }
        });
    });
    
    function GetJsonData() {
        var json = {
            "classid": 2,
            "name": $("#tb_name").val(),
            "zlclass": "测试类型1,测试类型2,测试类型3",
            "pname": $("#tb_contact_people").val(),
            "tel": $("#tb_contact_phone").val()
        };
        return json;
    }

      再来看看服务端的代码,RequestData.ashx.

    [Serializable]
    public class RequestDataJSON
    {
        public int classid { get; set; }
        public string name { get; set; }
        public string zlclass { get; set; }
        public string pname { get; set; }
        public string tel { get; set; }
    }
    
    /// <summary>
    /// Summary description for RequestData
    /// </summary>
    public class RequestData : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            int num = 0;
            context.Response.ContentType = "application/json";
            var data = context.Request;
            var sr = new StreamReader(data.InputStream);
            var stream = sr.ReadToEnd();
            var javaScriptSerializer = new JavaScriptSerializer();
            var PostedData = javaScriptSerializer.Deserialize<RequestDataJSON>(stream);
    
            tb_query obj = new tb_query();
            obj.classid = PostedData.classid;
            obj.name = PostedData.name;
            obj.zlclass = PostedData.zlclass;
            obj.pname = PostedData.pname;
            obj.tel = PostedData.tel;
            obj.ip = context.Request.UserHostAddress.ToString();
            obj.posttime = DateTime.Now.ToString();
    
            try
            {
                using (var ctx = new dbEntities())
                {
                    ctx.tb_query.AddObject(obj);
                    num = ctx.SaveChanges();
                }
            }
            catch (Exception msg)
            {
                context.Response.Write(msg.Message);
            }
    
            context.Response.ContentType = "text/plain";
            context.Response.Write(num);
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

      定义一个带有Serializable特征属性的类RequestDataJSON用来将客户端数据进行反序列化,从而获取到数据并存入数据库。上述代码中使用了EntityFramework,从而使得数据库的交互代码变得很简洁。返回结果有两种,对应ajax中的回调函数success()和error()。在success()回调函数中,如果返回结果的值大于0,则表示通过EntityFramework添加到数据库中的记录数;在error()回调函数中,返回结果则显示了失败的具体信息。

      RequestData类继承了IHttpHandler接口,表明它是以同步的方式处理客户端请求。当然,你也可以将其改为继承IHttpAsyncHandler接口来处理异步请求,代码接口大同小异。

  • 相关阅读:
    Mac php使用gd库出错 Call to undefined function imagettftext()
    centos 使用 locate
    Mac HomeBrew 安装 mysql
    zsh 命令提示符 PROMPT
    新的开始
    Java 面试题分析
    Java NIO Show All Files
    正确使用 Volatile 变量
    面试题整理 2017
    有10阶梯, 每次走1,2 or 3 阶,有多少种方式???
  • 原文地址:https://www.cnblogs.com/jaxu/p/3698404.html
Copyright © 2011-2022 走看看