An introduction to the example method of how ASP.NET uses Ajax to return a Json object-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

An introduction to the example method of how ASP.NET uses Ajax to return a Json object

黄舟

May 26, 2017 am 10:25 AM

This article mainly introduces the method of ASP.NET using Ajax to return Json object. It is very good and has a reference. For the value, friends in need can refer to

1. Create a new html page, such as Registration page"Register.htm"

<!DOCTYPE html>
<html >
<head>
  <title>用户注册</title>
  <meta charset="utf-8" />
  <style type="text/css">
    .msg
    {
      color:Red;
    }
  </style>
</head>
<body>
  <!-- 
    因为是ajax提交,html表单控件可以不必放在form里,且不能使用提交按纽(type="submit"),而使用普通按纽(type="button")
  -->
  用户名:<input type="text" name="id" id="id" /><span id="idMsg" class="msg"></span><br /> <!-- span用来显示错误信息 -->
  密　码:<input type="password" name="pwd" id="pwd" /><span id="pwdMsg" class="msg"></span><br />
  姓　名:<input type="text" name="name" id="xm" /><span id="nameMsg" class="msg"></span><br />        
  <input id="btnReg" type="button" value="注册" />
  <script type="text/javascript" src="bootstrap/js/jquery.js">    
  </script>
  <script src="reg.js" type="text/javascript"></script>  
</body>
</html>

Copy after login

2. Create a new js file, such as: reg.js

$(function() {
  //定义清除错误信息的函数
  function clearMsg() {
    $(".msg").html("");
  }
  //定义获取表单数据的函数,注意返回json对象
  function formData() {
    return {
      id: $("#id").val(),
      pwd: $("#pwd").val(),
      name: $("#xm").val()
    };
  }
  //定义注册功能的函数
  function reg() {
    var url = "Register.ashx";
    var data = formData();
    clearMsg();
    $.ajax({
      type: &#39;GET&#39;, //自动会把json对象转换为查询字符串附在url后面如：http://localhost:49521/Register.ashx?id=a&pwd=b&name=c
      url: url,
      dataType: &#39;json&#39;, //要求服务器返回一个json类型的数据,如：{"success":true,"message":"注册成功"}
      contentType: &#39;application/json&#39;,//发送信息给服务器时，内容编码的类型
      data: data, //提交给服务器的数据,直接使用json对象的数据,如:{"id":"a","pwd":"b","name":"c"}　（如果要求json格式的字符串，可使用用JSON.stringify(data)）
      success: function(responseData) {//如果响应成功（即200）
      if (responseData.success == true) {//responseData也是json格式，如：{"success":true,"message":"注册成功"}
          alert(responseData.message);
        } else {
        var msgs = responseData.msgs;//msgs对象是一个数组，如下所示：
        //{"success":false,"message":"注册失败","msgs":[{"id":"pwdMsg","message":"密码不能为空."},{"id":"nameMsg","message":"姓名不能为空."}]}
          for (var i = 0; i < msgs.length; i++) {
            $(&#39;#&#39; + msgs[i].id).html(msgs[i].message);
          }
        }
      },
      error: function() {
      //要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
      //function(XMLHttpRequest, textStatus, errorThrown){
      //通常情况下textStatus和errorThrown只有其中一个包含信息
      //this;  //调用本次ajax请求时传递的options参数
        alert(arguments[1]);
      }
    });//ajax
  }
  //定义一个初始化函数
  function init() {
    $("#btnReg").click(function() {
      reg();
    });
  }
  //调用初始化函数
  init();
});

Copy after login

3. Process ajax requests

Method 1: Manually splice json strings

Create a new general handler, such as: Register.ashx

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;
namespace WebLogin
{
  /// <summary>
  /// $codebehindclassname$ 的摘要说明
  /// </summary>
  [WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  public class Register1 : IHttpHandler
  {
    public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "application/json";//设置响应内容的格式是json格式
      string id = context.Request["id"];
      string pwd = context.Request["pwd"];
      string name = context.Request["name"];
      List<string> msgList = new List<string>();
      if (String.IsNullOrEmpty(id))
      {
        msgList.Add("{\"id\":\"idMsg\",\"message\":\"用户名不能为空.\"}");
      }
      if (pwd==null || pwd=="")
      {
        msgList.Add("{\"id\":\"pwdMsg\",\"message\":\"密码不能为空.\"}");//形如：{"id":"pwdMsg","message":"密码不能为空."}
      }
      if (name==null || name=="")
      {
        msgList.Add("{\"id\":\"nameMsg\",\"message\":\"姓名不能为空.\"}");
      }
      string responseText = "";
      if (msgList.Count == 0)
      {
        //调用后台代码写入数据库
        responseText = "{\"success\":true,\"message\":\"注册成功\"}";
      }
      else
      {
        string msgsValue = "";
        for (int i = 0; i < msgList.Count; i++)
        {
          msgsValue += msgList[i] + ",";//将列表中的每一个字符串连接起来，用","隔开,不过最后还会多","
        }
        msgsValue=msgsValue.Substring(0, msgsValue.Length - 1);//去掉末尾的","
        msgsValue = "[" + msgsValue + "]";//用"[]"括起来,如:[{"id":"pwdMsg","message":"密码不能为空."},{"id":"nameMsg","message":"姓名不能为空."}]
        responseText = "{\"success\":false,\"message\":\"注册失败\",\"msgs\":" + msgsValue + "}";
        //最的形如:{"success":false,"message":"注册失败","msgs":[{"id":"pwdMsg","message":"密码不能为空."},{"id":"nameMsg","message":"姓名不能为空."}]}
      }
      context.Response.Write(responseText);
    }
    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

Copy after login

Method 2 : Use the Json.NET tool to convert the C# object to json output

1. Create a new information class "Msg.cs"

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace WebLogin
{
  public class Msg
  {
    private string id;
    public string Id
    {
      get { return id; }
      set { id = value; }
    }
    private string message;
    public string Message
    {
      get { return message; }
      set { message = value; }
    }
    public Msg(string id, string message)
    {
      this.id = id;
      this.message = message;
    }
  }
}

Copy after login

2. Create a new return json The object's class "ResponseData.cs"

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;
namespace WebLogin
{
  public class ResponseData
  {
    private bool success;
    public bool Success
    {
      get { return success; }
      set { success = value; }
    }
    private string message;
    public string Message
    {
      get { return message; }
      set { message = value; }
    }
    private List<Msg> msgs;
    public List<Msg> Msgs
    {
      get { return msgs; }
      set { msgs = value; }
    }
    public ResponseData(bool success, string message)
    {
      this.success = success;
      this.message = message;
    }
    public ResponseData(bool success, string message, List<Msg> msgs)
    {
      this.success = success;
      this.message = message;
      this.msgs = msgs;
    }
  }
}

Copy after login

3. Go to the official website to download Json.NET and copyreference

After downloading and unzipping, "Newtonsoft.Json.dll" Copy it to the "bin" directory of the project and reference it (note that it is consistent with the .net version)

4. Create a new general processing program "reg.ashx"

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;
using Newtonsoft.Json;//引入
namespace WebLogin
{
  /// <summary>
  /// $codebehindclassname$ 的摘要说明
  /// </summary>
  [WebService(Namespace = "http://tempuri.org/")]
  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  public class reg : IHttpHandler
  {
    public void ProcessRequest(HttpContext context)
    {
      context.Response.ContentType = "application/json";//设置响应内容的格式是json格式
      string id = context.Request["id"];
      string pwd = context.Request["pwd"];
      string name = context.Request["name"];
      List<Msg> msgs = new List<Msg>();
      if (String.IsNullOrEmpty(id))
      {
        msgs.Add(new Msg("idMsg", "用户名不能为空."));
      }
      if (String.IsNullOrEmpty(pwd))
      {
        msgs.Add(new Msg("pwdMsg", "密码不能为空."));
      }
      if (String.IsNullOrEmpty(name))
      {
        msgs.Add(new Msg("nameMsg", "姓名不能为空."));
      }
      ResponseData rData;
      if (msgs.Count == 0)
      {
        //调用注册方法，写入数据库
        rData = new ResponseData(true, "注册成功.");
      }
      else
      {
        rData = new ResponseData(false, "注册失败.", msgs);
      }
      context.Response.Write(JsonConvert.SerializeObject(rData));//直接调用方法将rData转换为json字符串
    }
    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

Copy after login

4. The completion effect is as follows picture

The above is the detailed content of An introduction to the example method of how ASP.NET uses Ajax to return a Json object. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055612 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Fusion System, Explained

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1670

CakePHP Tutorial

1428

Laravel Tutorial

1329

PHP Tutorial

1274

C# Tutorial

1256

Related knowledge

PHP and Ajax: Building an autocomplete suggestion engine Jun 02, 2024 pm 08:39 PM

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

Performance optimization tips for converting PHP arrays to JSON May 04, 2024 pm 06:15 PM

Performance optimization methods for converting PHP arrays to JSON include: using JSON extensions and the json_encode() function; adding the JSON_UNESCAPED_UNICODE option to avoid character escaping; using buffers to improve loop encoding performance; caching JSON encoding results; and considering using a third-party JSON encoding library.

How to solve the 403 error encountered by jQuery AJAX request Feb 20, 2024 am 10:07 AM

Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.

How to solve the problem of jQuery AJAX error 403? Feb 23, 2024 pm 04:27 PM

How to solve the problem of jQueryAJAX error 403? When developing web applications, jQuery is often used to send asynchronous requests. However, sometimes you may encounter error code 403 when using jQueryAJAX, indicating that access is forbidden by the server. This is usually caused by server-side security settings, but there are ways to work around it. This article will introduce how to solve the problem of jQueryAJAX error 403 and provide specific code examples. 1. to make

How do annotations in the Jackson library control JSON serialization and deserialization? May 06, 2024 pm 10:09 PM

Annotations in the Jackson library control JSON serialization and deserialization: Serialization: @JsonIgnore: Ignore the property @JsonProperty: Specify the name @JsonGetter: Use the get method @JsonSetter: Use the set method Deserialization: @JsonIgnoreProperties: Ignore the property @ JsonProperty: Specify name @JsonCreator: Use constructor @JsonDeserialize: Custom logic

How to get variables from PHP method using Ajax? Mar 09, 2024 pm 05:36 PM

Using Ajax to obtain variables from PHP methods is a common scenario in web development. Through Ajax, the page can be dynamically obtained without refreshing the data. In this article, we will introduce how to use Ajax to get variables from PHP methods, and provide specific code examples. First, we need to write a PHP file to handle the Ajax request and return the required variables. Here is sample code for a simple PHP file getData.php:

In-depth understanding of PHP: Implementation method of converting JSON Unicode to Chinese Mar 05, 2024 pm 02:48 PM

In-depth understanding of PHP: Implementation method of converting JSONUnicode to Chinese During development, we often encounter situations where we need to process JSON data, and Unicode encoding in JSON will cause us some problems in some scenarios, especially when Unicode needs to be converted When encoding is converted to Chinese characters. In PHP, there are some methods that can help us achieve this conversion process. A common method will be introduced below and specific code examples will be provided. First, let us first understand the Un in JSON

PHP vs. Ajax: Solutions for creating dynamically loaded content Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript and XML) allows adding dynamic content without reloading the page. Using PHP and Ajax, you can dynamically load a product list: HTML creates a page with a container element, and the Ajax request adds the data to that element after loading it. JavaScript uses Ajax to send a request to the server through XMLHttpRequest to obtain product data in JSON format from the server. PHP uses MySQL to query product data from the database and encode it into JSON format. JavaScript parses the JSON data and displays it in the page container. Clicking the button triggers an Ajax request to load the product list.

See all articles