Ajax运用json数组传输数据
Ajax是目前非常流行的技术之一。很多地方都能用到他，比如在不刷新页面的情况下验证用户名是否已经存在等等。下面是，验证通过后，返回用户各个属性值的方法。
aspx页面代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 type="text/javascript">
window.onload = function () {
var btn = document.getElementById("<%=btnOK.ClientID %>");
btn.onclick = function () {
//1.创建XMLHttpRequest
var xmlHttpRequest = createXMLHttpRequest();
//2.设置回调函数
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var XMLDoc = xmlHttpRequest.responseText; //获取服务器端输出的xml,XMLDocument
var users = eval("(" + xmlHttpRequest.responseText + ")");
var showDiv = document.getElementById("showUserInfo");
showDiv.innerHTML = "";
for (var i = 0; i < users.length; i++) {
var htmlStr = "<table style='float:left;border:1px solid #000; margin:3px'><tr><td>";
htmlStr += "真实姓名：" + users[i].Name;
htmlStr += "</td></tr><tr><td>";
htmlStr += "登录名：" + users[i].LoginId;
htmlStr += "</td></tr><tr><td>";
htmlStr += "年龄：" + users[i].Age;
htmlStr += "</td></tr><tr><td>";
htmlStr += "未读信息数：" + users[i].MessageCount;
htmlStr += "</td></tr><tr><td>";
htmlStr += "积分数：" + users[i].Score;
htmlStr += "</td></tr></table>";
document.getElementById("showUserInfo").innerHTML += htmlStr;
}
showDiv.style.display = "";
}
}
//3.初始化xmlHttpRequest
xmlHttpRequest.open("POST", "Handler.ashx", true);
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送请求
var data = "loginId=" + document.getElementById("<%=txtUserName.ClientID %>").value;
xmlHttpRequest.send(data);
return false;
}
}
function createXMLHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
else {
return new XMLHttpRequest();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<asp:Button ID="btnOK" runat="server" Text="登陆" />
</div>
<div id="showUserInfo" style="font: 12px/20px; display: none;">
</div>
</form>
</body>
</html>
再创建一般处理程序 Handler.ashx：
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
//using System.Xml.Serialization;
using System.Text;
using System.Web.Script.Serialization;
using System.Collections.Generic;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string name = context.Request.Form["LoginId"];
//根据LoginId获取一个用户对象，实际应用中是从业务层获取
Random r = new Random();
List<UserInfo> userList = new List<UserInfo>();
for (int i = 0; i < 10; i++)
{
userList.Add(getUserByName(name, r));
}
string jsonStr = new JavaScriptSerializer().Serialize(userList);
context.Response.Write(jsonStr);
}
private UserInfo getUserByName(string name, Random r)
{
//根据loginId获取一个用户对象，实际应用中是从业务层获取
UserInfo user = new UserInfo();
user.Age = r.Next(16, 80);
user.LoginId = GetRandomString(r);
user.MessageCount = r.Next(100);
user.Name = name;
user.Score = r.Next(100);
return user;
}
public string GetRandomString(Random r)
{
char[] chars = { 'a','b','c','d','e','f','g'};
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 5; i++)
{
sb.Append(chars[r.Next(6)]);
}
return sb.ToString();
}
public bool IsReusable {
get {
return false;
}
}
}
转载于:https://www.cnblogs.com/zhanghai/p/4461254.html
Ajax运用json数组传输数据相关推荐
- Springboot接收ajax提交JSON数组
AJAX传递JSON数据 function save() {var data = JSON.stringify({d_date: "2019-06-06",vc_exchange ...
- html如何遍历ajax数组,ajax返回json数组遍历添加到html
大致需求为类型限制根据类型获取不同结果列表,再根据模糊查询搜索出结果,效果如下:- 例子:利用AJAX返回JSON数据,间接访问数据库,查出Nation 表,并用下拉列表显示 造一个外部下拉列表框 J ...
- ajax传递json数组php,怎么通过ajax传送json数组到php,并通过php将数据插入数据库
如题.本人刚开始学习php,基础并不好,百度了好久都无法实现,希望能给出例子.json数据是拼接得到的 t 1.php不会写 回复讨论(解决方案) 一般网站返回的格式是json POST提交的话 写成 ...
- ajax传json数组或List集合到后台
传json数组 前端代码如下: function ajaxClick() {var arr = []var jsont = {"name": "hejinghuan&qu ...
- ajax使用json数组,使用JSON传递数组值的Ajax
我有一个复选框和提交按钮表格的html表单. 当按钮被点击时,我打电话和ajax_function在那里我想传递 的数据到另一个php页面.我不知道如果我做了什么,到目前为止是正确的,所以我可以pro ...
- MVC中使用ajax传递json数组
解决方法 去www.json.org下载JSON2.js 再调用JSON.stringify(JSONData)将JSON对象转化为JSON串. var people = [{ "UserN ...
- 前台传json ajax,ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组...
1.引子 2.前端往后台传输json数据 JSON.stringify()方法将json对象转为字符串形式.如果不使用**JSON.stringify()**方法,后台的java代码将不能获得json ...
- vue如何把数组转为json数组_vue.js,_vuejs Ajax取得一个数据json数组，vue.js - phpStudy...
vuejs Ajax取得一个数据json数组 vuejs Ajax取得一个数据json数组后,要通取回的数据再做判断一定只能通这种方式或者 套template标签 {{item.displayWord ...
- ajax解析json中的对象数组对象,在JQuery中检索json数组后获取json对象Ajax
我使用JQuery AJAX检索某些数据(标题和说明).正如你可以看到我打通的结果,并出结果的JSON数组和循环div标签中在JQuery中检索json数组后获取json对象Ajax success ...
- jquery ajax json传递数组,jQuery ajax 传递JSON数组到Spring Controller
jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...
最新文章
- 0.7秒完成动漫线稿上色，爱奇艺发布AI上色引擎
- 擦地机器人修理_不要智障机器人，擦地机器人就选iRobot，干湿两擦用了就知道...
- 苹果airpods android,苹果AirPodsPro搭配Android手机实测：支持功能不够完整,购买前要认真考虑...
- Java 导出excel表 POI
- CCNA笔记之第十九节：RIP协议（大实验3）
- 通过JavaFX标注制作动画效果
- 一步步编写操作系统 48 加载内核1
- flash FMS的一些最优参数设置
- detectron2训练自己的数据集_TensorFlow2学习十五、使用VGG16模型训练自己的数据集...
- centos下svn和Apache的结合使用
- CAD图纸打印出来后很多CAD文字消失了怎么办？
- Windows 10 error code 0x80072efd
- The requested URL *** was not found on this server
- 想设计亿万级高并发架构，你要先知道高并发是什么？（转载）
- 简单之美——系统设计黄金法则
- 咸鱼Micropython—LED用法
- 【数值模型系列】link_grib.csh脚本解读
- 淘宝运营 钻展基本了解 钻展投放方案 钻展投放注意的点
- 多元伯努利分布 multivariate bernoulli distribution
- WebLogic之eclipse安装WebLogic插件