Maison > Article > interface Web > jquery+ajax obtient et exploite les données json (avec code)
jquery+ajax obtient et exploite les données json (avec code)
- php中世界最好的语言original
- 2018-04-25 15:13:331443parcourir
Cette fois, je vais vous présenter jquery+ajax pour obtenir et exploiter des données json (avec code). Quelles sont les précautions pour que jquery+ajax obtienne et exploite des données json. Ce qui suit est un cas pratique. . Jetons un coup d'oeil une fois.
Pour le problème, récupérez les données json en arrière-plan et remplissez le contenu dans la liste déroulante Le code est très simple. Veuillez consulter le code ci-dessous pour le processus spécifique.
Exigences : url : lien par : ID sel : sélecteur de liste déroulante
//Obtenir la liste déroulante
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>')
});
}
Le code ci-dessus est très simple et ce problème peut être facilement résolu.
Jquery utilise Ajax pour obtenir le processus de traitement des pages de données Json renvoyé par l'arrière-plan
Veuillez consulter l'exemple de code suivant pour le processus d'implémentation spécifique :
<!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?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?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">
<p>
<asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)">
</asp:DropDownList>
<ul id="list"></ul>
<input type="button" value="保存数据" onclick="SavePara()" />
</p>
</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;
}
}
Croyez-le ou non Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !
Lecture recommandée :
Explication détaillée des étapes de lecture des propriétés ajax
Résumé de la méthode de soumission de formulaire Jquery+ajax
Comment implémenter la fonction de rafraîchissement partiel avec jQuery+ et ajax
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation de la file d'attente de requêtes AJAXArticle suivant：Explication détaillée de l'utilisation de la file d'attente de requêtes AJAX
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript