jquery+ajax obtains and operates json data (with code)

This time I will bring you jquery ajax to obtain and operate json data (with code). What are the precautions for jquery ajax to obtain and operate json data. The following is a practical case, let's take a look.

For the problem, get json data from the background and fill the content into the drop-down list. The code is very simple. Please see the code below for the specific process.

Requirements:url: link par: ID sel: drop-down list selector

//Get the drop-down list

function BuildSelectBox(url, par, sel) {
 $(sel).empty();
 $.getJSON(url, { id: par }, function (json, textStatus) {
  for (var i = json.length - 1; i >= 0; i--) {
   $(sel).prepend('<option>' + json[i].Name + '</option>')
  };
  $(sel).prepend('<option>请选择</option>')
 });
}

The above code is very simple, and this problem is easily solved.

Jquery uses Ajax to obtain the Json data page processing process returned by the background

Please see the following code example for the specific implementation process:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
 <title></title> 
 <script></script> 
 <script> 
  $(function () { 
   $.ajax({ 
    url: &#39;jsondata.ashx&#39;, 
    type: &#39;GET&#39;, 
    dataType: &#39;json&#39;, 
    timeout: 1000, 
    cache: false, 
    beforeSend: LoadFunction, //加载执行方法 
    error: erryFunction, //错误执行方法 
    success: succFunction //成功执行方法 
   }) 
   function LoadFunction() { 
    $("#list").html(&#39;加载中...&#39;); 
   } 
   function erryFunction() { 
    alert("error"); 
   } 
   function succFunction(tt) { 
    $("#list").html(&#39;&#39;); 
    //eval将字符串转成对象数组 
    //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" }; 
    //json = eval(json); 
    //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); 
    var json = eval(tt); //数组   
    $.each(json, function (index, item) { 
     //循环获取数据 
     var name = json[index].Name; 
     var idnumber = json[index].IdNumber; 
     var sex = json[index].Sex; 
     $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>"); 
    }); 
   } 
  }); 
 </script> 
 
 
 

   

        using System;  using System.Web;  using System.Web.Script.Serialization;  using System.IO;  using System.Text;  using System.Collections.Generic;  using Newtonsoft.Json;  using System.Data;  public class jsondata : IHttpHandler {   public void ProcessRequest(HttpContext context)   {    context.Response.ContentType = "text/plain";    string JsonStr = JsonConvert.SerializeObject(CreateDT());    context.Response.Write(JsonStr);    context.Response.End();   }   #region 创建测试数据源   //创建DataTable   protected DataTable CreateDT()   {    DataTable tblDatas = new DataTable("Datas");    //序号列    //tblDatas.Columns.Add("ID", Type.GetType("System.Int32"));    //tblDatas.Columns[0].AutoIncrement = true;    //tblDatas.Columns[0].AutoIncrementSeed = 1;    //tblDatas.Columns[0].AutoIncrementStep = 1;    //数据列    tblDatas.Columns.Add("IdNumber", Type.GetType("System.String"));    tblDatas.Columns.Add("Name", Type.GetType("System.String"));    tblDatas.Columns.Add("BirthDate", Type.GetType("System.String"));    tblDatas.Columns.Add("Sex", Type.GetType("System.String"));    tblDatas.Columns.Add("Wage", Type.GetType("System.Decimal"));    tblDatas.Columns.Add("Bonus", Type.GetType("System.Decimal"));    //统计列开始    tblDatas.Columns.Add("NeedPay", Type.GetType("System.String"), "Wage+Bonus");    //统计列结束    tblDatas.Columns.Add("Address", Type.GetType("System.String"));    tblDatas.Columns.Add("PostCode", Type.GetType("System.String"));    //设置身份证号码为主键    tblDatas.PrimaryKey = new DataColumn[] { tblDatas.Columns["IdNumber"] };    tblDatas.Rows.Add(new object[] { "43100000000000", "张三", "1982", "0", 3000, 1000, null, "深圳市", "518000" });    tblDatas.Rows.Add(new object[] { "43100000000001", "李四", "1983", "1", 3500, 1200, null, "深圳市", "518000" });    tblDatas.Rows.Add(new object[] { "43100000000002", "王五", "1984", "1", 4000, 1300, null, "深圳市", "518000" });    tblDatas.Rows.Add(new object[] { "43100000000003", "赵六", "1985", "0", 5000, 1400, null, "深圳市", "518000" });    tblDatas.Rows.Add(new object[] { "43100000000004", "牛七", "1986", "1", 6000, 1500, null, "深圳市", "518000" });    return tblDatas;   }   #endregion   public bool IsReusable   {    get    {     return false;    }   }  }      using System;  using System.Web;  using System.Web.Script.Serialization;  using System.IO;  using System.Text;  using System.Collections;  using System.Collections.Generic;  using System.Data;  public class jsondata : IHttpHandler {   public void ProcessRequest(HttpContext context)   {    context.Response.ContentType = "text/plain";    context.Response.Cache.SetNoStore();    string data = "[{\"key\":\"1\",\"info\":{\"name\":\"222\",\"age\":\"333\",\"sex\":\"444\"}},{\"key\":\"2\",\"info\":{\"name\":\"999\",\"age\":\"000\",\"sex\":\"111\"}}]";    context.Response.Write(new JavaScriptSerializer().Serialize(data));   }   public bool IsReusable   {    get    {     return false;    }   }  }    nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">          <script></script>   <script> function GetPara(o) { var sortid = $(o).val(); $.ajax({ url: &#39;GetPara.ashx?type=get&sortid=&#39; + sortid, type: &#39;GET&#39;, dataType: &#39;json&#39;, timeout: 3000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { $("#list").html(&#39;加载中...&#39;); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(&#39;&#39;); var json = eval(tt); //数组 $.each(json, function (index, item) { //循环获取数据 var Id = json[index].id; var Name = json[index].name; $("#list").html($("#list").html() + "<br>" + Name + "<input type=&#39;text&#39; id=&#39;" + Id + "&#39; /><br/>"); }); } }; function SavePara() { var parameter = {}; $("#list input:text").each(function () { var key = $(this).attr("id"); var value = $(this).val(); parameter[key] = value; }); $.ajax({ url: &#39;GetPara.ashx?type=save&#39;, type: &#39;POST&#39;, dataType: &#39;json&#39;, data: parameter, timeout: 3000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { } function erryFunction() { } function succFunction(tt) { } }; </script>       

   

            

          

        using System;  using System.Web;  using System.Data;  using System.Collections.Generic;  using System.Web.Script.Serialization;  public class GetPara : IHttpHandler {    public void ProcessRequest (HttpContext context) {    context.Response.ContentType = "text/plain";    string SortId = context.Request["sortid"];    string Type = context.Request["type"];    if (Type=="get")    {     if (!string.IsNullOrEmpty(SortId))     {      DataTable dt = MSCL.SqlHelper.GetDataTable("select * from PR_PRODUCTPARAS where sortid='" + SortId + "' ");      List list = new List();      for (int i = 0; i 

I believe you have read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps of ajax reading properties

Summary of jquery ajax form submission method

How to implement partial refresh function with jQuery and ajax

The above is the detailed content of jquery+ajax obtains and operates json data (with code). For more information, please follow other related articles on the PHP Chinese website!