masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

Bagaimana untuk mengisi kandungan ke dalam senarai drop-down selepas jquery memperoleh data json dari latar belakang menggunakan ajax_jquery

WBOY
Lepaskan： 2016-05-16 15:42:44
asal
1403 orang telah melayarinya

Untuk masalah ini, dapatkan data json dari latar belakang dan isikan kandungan ke dalam senarai juntai bawah. Sila lihat kod di bawah untuk proses tertentu.

Keperluan: url: pautan par: ID sel: pemilih senarai lungsur

//Dapatkan senarai lungsur turun

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 value="' + json[i].Id + '">' + json[i].Name + '</option>')
  };
  $(sel).prepend('<option value="0">请选择</option>')
 });
}
Salin selepas log masuk

Kod di atas sangat mudah, dan masalah ini boleh diselesaikan dengan mudah.

Jquery menggunakan Ajax untuk mendapatkan proses pemprosesan halaman data Json yang dikembalikan oleh latar belakang

Sila lihat contoh kod di bawah untuk proses pelaksanaan khusus: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title></title> 
 <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
  $(function () { 
   $.ajax({ 
    url: 'jsondata.ashx', 
    type: 'GET', 
    dataType: 'json', 
    timeout: 1000, 
    cache: false, 
    beforeSend: LoadFunction, //加载执行方法 
    error: erryFunction, //错误执行方法 
    success: succFunction //成功执行方法 
   }) 
   function LoadFunction() { 
    $("#list").html('加载中...'); 
   } 
   function erryFunction() { 
    alert("error"); 
   } 
   function succFunction(tt) { 
    $("#list").html(''); 
    //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> 
</head> 
<body> 
 <ul id="list"> 
 </ul> 
</body> 
</html> 

<%@ WebHandler Language="C#" Class="jsondata" %> 
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; 
  } 
 } 
} 

<!-- 
  <script type="text/javascript"> 
  $(function () { 
   $.ajax({ 
    url: 'jsondata.ashx', 
    type: 'GET', 
    dataType: 'json', 
    timeout: 1000, 
    cache: false, 
    beforeSend: LoadFunction, //加载执行方法 
    error: erryFunction, //错误执行方法 
    success: succFunction //成功执行方法 
   }) 
   function LoadFunction() { 
    $("#list").html('加载中...'); 
   } 
   function erryFunction() { 
    alert("error"); 
   } 
   function succFunction(tt) { 
    $("#list").html(''); 
    //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 Key = json[index].key; 
     var Info = json[index].info; 
     //     var idnumber = json[index].IdNumber; 
     //     var sex = json[index].Sex; 
     $("#list").html($("#list").html() + "<br>" + Key + "----" + Info.name); //+ " - " + idnumber + " - " + sex + "<br/>"); 
    }); 
   } 
  }); 
 </script> 
--> 

<%@ WebHandler Language="C#" Class="jsondata" %> 
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; 
  } 
 } 
} 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2013.aspx.cs" Inherits="Test2013" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
  function GetPara(o) { 
   var sortid = $(o).val(); 
   $.ajax({ 
    url: 'GetPara.ashx&#63;type=get&sortid=' + sortid, 
    type: 'GET', 
    dataType: 'json', 
    timeout: 3000, 
    cache: false, 
    beforeSend: LoadFunction, //加载执行方法  
    error: erryFunction, //错误执行方法  
    success: succFunction //成功执行方法  
   }) 
   function LoadFunction() { 
    $("#list").html('加载中...'); 
   } 
   function erryFunction() { 
    alert("error"); 
   } 
   function succFunction(tt) { 
    $("#list").html(''); 
    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='text' id='" + Id + "' /><br/>"); 
    }); 
   } 
  }; 
  function SavePara() { 
   var parameter = {}; 
   $("#list input:text").each(function () { 
    var key = $(this).attr("id"); 
    var value = $(this).val(); 
    parameter[key] = value; 
   }); 
   $.ajax({ 
    url: 'GetPara.ashx&#63;type=save', 
    type: 'POST', 
    dataType: 'json', 
    data: parameter, 
    timeout: 3000, 
    cache: false, 
    beforeSend: LoadFunction, //加载执行方法  
    error: erryFunction, //错误执行方法  
    success: succFunction //成功执行方法  
   }) 
   function LoadFunction() { 
   } 
   function erryFunction() { 
   } 
   function succFunction(tt) { 
   } 
  }; 
 </script> 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
  <asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)"> 
  </asp:DropDownList> 
  <ul id="list"></ul> 
  <input type="button" value="保存数据" onclick="SavePara()" /> 
 </div> 
 </form> 
</body> 
</html> 

<%@ WebHandler Language="C#" Class="GetPara" %> 
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<Paras> list = new List<Paras>(); 
    for (int i = 0; i < dt.Rows.Count; i++) 
    { 
     Paras a = new Paras(); 
     a.id = dt.Rows[i]["PARAID"].ToString(); 
     a.name = dt.Rows[i]["PARANAME"].ToString(); 
     list.Add(a); 
    } 
    context.Response.Write(new JavaScriptSerializer().Serialize(list)); 
   } 
  } 
  else if (Type == "save") 
  { 
   //反序列化json 
   System.IO.Stream stream = context.Request.InputStream; 
   System.IO.StreamReader sr = new System.IO.StreamReader(stream, System.Text.Encoding.GetEncoding("UTF-8")); 
   string sJson = sr.ReadToEnd(); 
   if (sJson.Contains("&")) 
   { 
    string[] sArr = sJson.Split('&'); 
    for (int i = 0; i < sArr.Length; i++) 
    { 
     string[] sArr1 = sArr[i].Split('='); 
     object id = sArr1[0]; 
     object value = sArr1[1]; 
    } 
   } 
  } 
  else 
  { } 
 } 
 public bool IsReusable { 
  get { 
   return false; 
  } 
 } 
 public struct Paras 
 { 
  public string id; 
  public string name; 
 } 
}
Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Label berkaitan：
jquery_ajax获取json数据 jquery_ajax返回json jquery_ajax_json实例
sumber：php.cn
Artikel sebelumnya：jQuery melaksanakan kesan menu navigasi gaya tag code_jquery Artikel seterusnya：jQuery drop-down mencantikkan borang kesan kesan kod sharing_jquery
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
MySQL mendapat data daripada berbilang jadual Saya mempunyai jadual eg_design yang mengandungi lajur berikut: dan jadual eg_domains yang...
daripada 2024-04-06 18:42:44
0
2
479
Tidak dapat mendapatkan data kuki daripada pelayan Go menggunakan React Selepas React saya mula pergi ke bahagian belakang dan menambah githubOAUTH dan sesi pada ...
daripada 2024-04-06 13:09:26
0
1
384
Tambahkan atribut Endpoint _header pada objek respons JSON Saya sedang menguji menarik data daripada perkhidmatan titik akhir jauh (npoint.io). Apabi...
daripada 2024-04-05 10:35:39
0
1
1376
Tukar pertanyaan SQL untuk memaparkan output dalam format masa Ini adalah data yang saya gunakan dalam pangkalan data SQL saya: Symbol|High_TimeAAPL10:01...
daripada 2024-04-04 21:02:02
0
1
269
Cara untuk memberikan data melalui DOM dan bukannya melalui jadual Saya mempunyai soalan tentang aplikasi yang saya buat, saya menggunakan pangkalan data Ora...
daripada 2024-04-04 18:17:27
0
1
3567
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan