利用AJAX+JSON实现DataGrid
利用AJAX_JSON实现DataGrid
开发研究与设计技术本栏目责任编辑：谢媛媛１概述在现在的企业应用中，大量需要显示表数据，在Ｊ２ＥＥ中，大部分情况下，很多的开发人员普遍采用迭代或遍历的办法显示数据，再根据需要显示发那也信息，而用过ＡＳＰ．Ｎｅｔ的人肯定对它的ＤａｔａＧｒｉｄ组件印象很深刻，它不但能显示数据集和数据表数据而且还提供分页功能，但是在ＪＡＶＡ里面却没有类似的ＤａｔａＧｒｉｄ组件可以复用，而在我们实际的项目中却大量需要用到它，为此我们在项目中利用ＪＳＯＮ＋ＡＪＡＸ自己开发出了一个ＤａｔａＧｒｉｄＪＳＰ标签组件，它具有以下特性：（１）分页方式可采取超级链接、按钮或者图片，设置ｐａｇｅＳｉｚｅ＝０不显示分页；（２）设置ｏｐｔｉｏｎＴｙｐｅ属性可以在第一列自动添加ＣｈｅｃｋＢｏｘ或者Ｒａｄｉｏ或不加；（３）支持日期格式化以及奇数行和偶数行不同的风格；（４）采用ＡＪＡＸ＋ＪＳＯＮ实现第一次之后数据的读取，大大提高了效率；（５）采取类似ＪＳＦＤａｔａＭｏｄｅｌ数据模型，可扩展性强；（６）支持ＡＪＡＸ模式和非ＡＪＡＸ模式以及默认风格设置；（７）支持绝大部分表格属性的设置，支持ＩＥ和Ｆｉｒｅｆｏｘ。
其效果图如图１所示（为了减小图片占用幅面，故使用简单表结构和较少的行）：图１采用ＣｈｅｃｋＢｏｘ和图片分页效果上面的效果图对应ＪＳＰ标签代码为：＜ｄａｔａ：ｄａｔａｇｒｉｄｄａｔａＳｏｕｒｃｅ＝＂ｄａｔａ＂ｉｄ＝＂ｄｉｃｔ＂ｂｏｒｄｅｒ＝＂０＂ａｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｄｅｆａｕｌｔＲｏｗＳｔｙｌｅ＝＇ｔｒｕｅ＇ｐａｇｅＳｉｚｅ＝＇６＇ｃｓｓＣｌａｓｓ＝＇ｔａｂｌｅ０＇ｐａｇｅｒＳｔｙｌｅ＝＇２＇ｗｉｄｔｈ＝＇５００ｐｘ＇ｏｐｔｉｏｎＴｙｐｅ＝＇１＇ｏｐｔｉｏｎＢｉｎｄ＝＇ＤａｔａＮｏ＇ｈｅａｄＳｔｙｌｅ＝＂ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃ＥＥＥＥＥＥ；ｈｅｉｇｈｔ：２０ｐｘ；＂ｃｅｌｌＳｐａｃｉｎｇ＝＂１＂ｃｅｌｌＰａｄｄｉｎｇ＝＂１＂ａｊａｘ＝＇ｔｒｕｅ＇ｆｉｒｓｔＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｆｉｒｓｔ．ｇｉｆ＂ｌａｓｔＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｌａｓｔ．ｇｉｆ＂ｎｅｘｔＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｎｅｘｔ．ｇｉｆ＂ｐｒｅｖＩｍａｇｅ＝＂ｉｍａｇｅｓ／ａｒｒｏｗ－ｐｒｅｖ．ｇｉｆ＂＞＜ｄａｔａ：ｃｏｌｕｍｎｎａｍｅ＝＂ＤａｔａＮｏ＂ｔｉｔｌｅ＝＂数据编号＂ｈｅａｄＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｒｏｗＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｗｉｄｔｈ＝＇１００ｐｘ＇／＞＜ｄａｔａ：ｃｏｌｕｍｎｎａｍｅ＝＂ＤａｔａＮａｍｅ＂ｔｉｔｌｅ＝＂数据名称＂ｈｅａｄＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｒｏｗＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｗｉｄｔｈ＝＇１７０ｐｘ＇ｌｉｎｋ＝＂ＤａｔａＬｉｎｋ＂／＞＜ｄａｔａ：ｃｏｌｕｍｎｎａｍｅ＝＂ＤａｔａＴｉｍｅ＂ｔｉｔｌｅ＝＂时间＂ｈｅａｄＡｌｉｇｎ＝＂ｃｅｎ－ｔｅｒ＂ｒｏｗＡｌｉｇｎ＝＂ｃｅｎｔｅｒ＂ｗｉｄｔｈ＝＇２００ｐｘ＇ｄａｔｅＦｏｒｍａｔ＝＂ｙｙｙｙ－ＭＭ－ｄｄＨＨ：ｍｍ＂／＞＜／ｄａｔａ：ｄａｔａｇｒｉｄ＞２ＡＪＡＸ及ＪＳＯＮ简介２．１ＡＪＡＸＡＪＡＸ用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。
详解datagrid使用方法（重要）
详解datagrid使⽤⽅法（重要）1、将静态HTML渲染为datagrid样式<!-- ⽅式⼀：将静态HTML渲染为datagrid样式 --><table class="easyui-datagrid"><thead><tr><th data-options="field:'id'">编号</th><th data-options="field:'name'">姓名</th><th data-options="field:'age'">年龄</th></tr></thead><tbody><tr><td>001</td><td>⼩明</td><td>90</td></tr><tr><td>002</td><td>⽼王</td><td>3</td></tr></tbody></table>2、发送ajax请求获取json数据创建datagrid 提供json⽂件<!-- ⽅式⼆：发送ajax请求获取json数据创建datagrid --><table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'"class="easyui-datagrid"><thead><tr><th data-options="field:'id'">编号</th><th data-options="field:'name'">姓名</th><th data-options="field:'age'">年龄</th></tr></thead></table>2、使⽤easyUI提供的API创建datagrid（掌握）<!-- ⽅式三：使⽤easyUI提供的API创建datagrid --><script type="text/javascript">$(function(){//页⾯加载完成后，创建数据表格datagrid$("#mytable").datagrid({//定义标题⾏所有的列columns:[[{title:'编号',field:'id',checkbox:true},{title:'姓名',field:'name'},{title:'年龄',field:'age'},{title:'地址',field:'address'}]],//指定数据表格发送ajax请求的地址url:'${pageContext.request.contextPath }/json/datagrid_data.json',rownumbers:true,singleSelect:true,//定义⼯具栏toolbar:[{text:'添加',iconCls:'icon-add',//为按钮绑定单击事件handler:function(){alert('add...');}},{text:'删除',iconCls:'icon-remove'},{text:'修改',iconCls:'icon-edit'},{text:'查询',iconCls:'icon-search'}],//显⽰分页条pagination:true});});</script>如果数据表格中使⽤了分页条，要求服务端响应的json变为：请求响应：3、案例：取派员分页查询（1）页⾯调整修改页⾯中datagrid的URL地址（2）服务端实现分装分页相关属性/*** 通⽤分页查询⽅法*/public void pageQuery(PageBean pageBean) {int currentPage = pageBean.getCurrentPage();int pageSize = pageBean.getPageSize();DetachedCriteria detachedCriteria = pageBean.getDetachedCriteria();//查询total---总数据量detachedCriteria.setProjection(Projections.rowCount());//指定hibernate框架发出sql的形式----》select count(*) from bc_staff; List<Long> countList = (List<Long>) this.getHibernateTemplate().findByCriteria(detachedCriteria);Long count = countList.get(0);pageBean.setTotal(count.intValue());//查询rows---当前页需要展⽰的数据集合（3）detachedCriteria.setProjection(null);//指定hibernate框架发出sql的形式----》select * from bc_staff int firstResult = (currentPage - 1) * pageSize;int maxResults = pageSize;List rows = this.getHibernateTemplate().findByCriteria(detachedCriteria, firstResult, maxResults);pageBean.setRows(rows);}//属性驱动，接收页⾯提交的分页参数private int page;private int rows;/*** 分页查询⽅法* @throws IOException*/public String pageQuery() throws IOException{PageBean pageBean = new PageBean();pageBean.setCurrentPage(page);pageBean.setPageSize(rows);//创建离线提交查询对象DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Staff.class);pageBean.setDetachedCriteria(detachedCriteria);staffService.pageQuery(pageBean);//使⽤json-lib将PageBean对象转为json，通过输出流写回页⾯中//JSONObject---将单⼀对象转为json//JSONArray----将数组或者集合对象转为jsonJsonConfig jsonConfig = new JsonConfig();//指定哪些属性不需要转jsonjsonConfig.setExcludes(new String[]{"currentPage","detachedCriteria","pageSize"});String json = JSONObject.fromObject(pageBean,jsonConfig).toString();ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");ServletActionContext.getResponse().getWriter().print(json);return NONE;}取派员的批量删除在取派员表中存在⼀个删除标识位deltag，1表⽰已删除，0表⽰未删除（1）页⾯调整//修改删除按钮绑定的事件：function doDelete(){//获取数据表格中所有选中的⾏，返回数组对象var rows = $("#grid").datagrid("getSelections");if(rows.length == 0){//没有选中记录，弹出提⽰$.messager.alert("提⽰信息","请选择需要删除的取派员！","warning");}else{//选中了取派员,弹出确认框$.messager.confirm("删除确认","你确定要删除选中的取派员吗？",function(r){if(r){var array = new Array();//确定,发送请求//获取所有选中的取派员的idfor(var i=0;i<rows.length;i++){var staff = rows[i];//json对象var id = staff.id;array.push(id);}var ids = array.join(",");//1,2,3,4,5location.href = "staffAction_deleteBatch.action?ids="+ids;}});}}（2）服务端实现第⼀步：在StaffAction中创建deleteBatch批量删除⽅法//属性驱动，接收页⾯提交的ids参数private String ids;/*** 取派员批量删除*/public String deleteBatch(){staffService.deleteBatch(ids);return LIST;}第⼆步：在Ｓｅｒｖｉｃｅ中提供批量删除⽅法/*** 取派员批量删除* 逻辑删除，将deltag改为1*/public void deleteBatch(String ids) {//1,2,3,4if(StringUtils.isNotBlank(ids)){String[] staffIds = ids.split(",");for (String id : staffIds) {staffDao.executeUpdate("staff.delete", id);}}}第三步：在Staff.hbm.xml中提供HQL语句，⽤于逻辑删除取派员<!-- 取派员逻辑删除 --><query name="staff.delete">UPDATE Staff SET deltag = '1' WHERE id = ?</query>取派员修改功能（1）页⾯调整第⼀步：为数据表格绑定双击事件第⼆步：复制页⾯中添加取派员窗⼝，获得修改取派员窗⼝第三步：定义function//数据表格绑定的双击⾏事件对应的函数function doDblClickRow(rowIndex, rowData){//打开修改取派员窗⼝$('#editStaffWindow').window("open");//使⽤form表单对象的load⽅法回显数据$("#editStaffForm").form("load",rowData);}（2）服务端实现在StaffAction中创建edit⽅法，修改取派员信息/*** 修改取派员信息*/public String edit(){//显查询数据库，根据id查询原始数据Staff staff = staffService.findById(model.getId());//使⽤页⾯提交的数据进⾏覆盖staff.setName(model.getName());staff.setTelephone(model.getTelephone());staff.setHaspda(model.getHaspda());staff.setStandard(model.getStandard());staff.setStation(model.getStation());staffService.update(staff);return LIST;}到此这篇关于详解datagrid使⽤⽅法（重要）的⽂章就介绍到这了,更多相关datagrid使⽤⽅法内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
ajax跨域的解决方案
ajax跨域的解决方案在前端开发中，经常会遇到需要实现跨域请求的情况。
而其中一个常见的跨域请求方案就是使用Ajax。
本文将介绍一些常用的Ajax跨域解决方案。
1. JSONP：JSONP是一种常用的跨域解决方案。
它通过在页面中动态创建<script>标签，向目标服务器请求数据，并将数据作为回调函数的参数返回。
这样来实现跨域请求和数据传输。
但是JSONP只支持GET请求，且只能获取存在的数据，无法处理POST等其他类型的请求。
2. CORS（跨域资源共享）：CORS是HTML5中引入的一种跨域解决方案。
它通过在服务器端设置一些特殊的响应头，来实现跨域资源的共享。
具体而言，服务器在响应中返回一个Access-Control-Allow-Origin的头部字段，告知浏览器哪些源可以访问资源。
这样浏览器在发送跨域请求时，会先检查响应中的头部字段，若符合访问要求则允许请求。
3. 反向代理：反向代理是一种常见的解决跨域问题的方式。
它主要通过在服务器端设置代理服务器，将请求发送到目标服务器，并将响应返回给客户端。
客户端与反向代理服务器之间的通信是同源的，因此不存在跨域问题。
这样通过反向代理服务器转发请求，实现了跨域请求的目的。
不过反向代理的设置需要专业的服务器配置知识，对开发者而言可能比较繁琐。
4. postMessage方法：postMessage是一种HTML5引入的跨文档消息传递机制。
它可以在不同窗口或跨域的文档之间传递数据。
通过在父页面中使用postMessage方法向子页面传递数据，然后在子页面中监听message事件来获取数据。
这样就实现了跨域传递数据的目的。
5. 使用代理服务器：使用代理服务器也是一种常见的跨域解决方案。
在开发环境中，我们可以在本地搭建一个代理服务器，将前端请求发送到代理服务器，再由代理服务器向目标服务器发送请求。
这样就避免了直接在浏览器中发送跨域请求。
总结起来，Ajax跨域解决方案有很多种，每种方案都有其适用的场景和限制。
利用JSON实现Ajax动态加载下拉列表框
利用JSON实现Ajax动态加载下拉列表框客户端利用XMLHttpRequest对象异步传递参数到服务器②服务端接收参数并查询数据库，根据结果集组织JSON数据，然后返回JSON③客户端获取服务器响应后，立即执行回调函数，解析JSON数据，然后加载到页面上示例：①前端页面<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><script language="javascript" src="js/xmlhttp.js"></script> <script language="javascript">function submit(){if(document.getElementById('province').options[document. getElementById('province').selectedIndex].value==0){ alert("请选择省份");return false;}else{createXMLHttpRequest();xmlHttp.onreadystatechange=callback;xmlHttp.open("post","/Ajax/ActionServlet");xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");xmlHttp.send("province="+document.getElementById('prov ince').options[document.getElementById('province').selectedIndex].value);return true;}}function callback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var json=new Object();json=eval("("+xmlHttp.responseText+")");//清空上次的记录while(document.getElementById('city').options.length>0){document.getElementById('city').options.remove(0);}//动态添加数据for(var i=0;i<json.province.length;i++){var o=document.createElement('OPTION');o.text=json.province[i].city;o.value=json.province[i].city;document.getElementById('city').add(o);}}}}</script></head><body><select name="province" id="province" onchange="return submit()"><option value="0">选择省份</option><option value="广东">广东</option><option value="海南">海南</option></select><select name="city" id="city"></select></body></html>②服务器端处理package com.hzp.servlet;import java.io.IOException;import java.io.PrintWriter;import java.sql.ResultSet;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.hzp.util.Database;public class ActionServlet extends HttpServlet {private static final long serialVersionUID = 1L;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("dopost");response.setContentType("text/html;charset=utf-8");request.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();//获取参数String province=request.getParameter("province");System.out.println(province);//查询数据库Database db=new Database();ResultSet rs=db.selectDB(province);//组织JSON字符字面量StringBuffer info=new StringBuffer();//JSON格式开始info.append("{province:[");try {while(rs.next()){System.out.println(rs.getString("city"));info.append("{city:'");info.append(rs.getString("city"));info.append("'},");}//去掉最后那个逗号info.delete(info.length()-1,info.length());//JSON格式结尾info.append("]}");rs.close();db.closeDB();} catch (SQLException e) {e.printStackTrace();}System.out.println(info.toString());//返回JSON给客户端out.print(info.toString());out.flush();out.close();}}③数据库操作封装package com.hzp.util;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class Database {private Connection conn=null;private PreparedStatement pstmt = null;private ResultSet rs = null;private final String URL="jdbc:mysql://localhost:3306/ajax?user=root&password=5 15422";public Database(){try{Class.forName("com.mysql.jdbc.Driver").newInstance();this.conn=DriverManager.getConnection(this.URL);}catch(Exception e){e.printStackTrace();}}public ResultSet selectDB(String province){String sql="select * from address where province=?"; try {pstmt = this.conn.prepareStatement(sql);pstmt.setString(1,province);rs = pstmt.executeQuery();} catch (SQLException e) {e.printStackTrace();}return rs;}public void closeDB() {try {if (rs != null)rs.close();if (pstmt != null)pstmt.close();if (conn != null)conn.close();} catch (Exception e) {e.printStackTrace();}}}。
easyuidatagrid使用参考
easyuidatagrid使⽤参考from:https:///huangf714/p/5948420.html数据表格继承$.fn.panel.defaults，使⽤$.fn.datagrid.defaults重载默认值。
依赖关系控制⾯板缩放链接按钮分页使⽤⽅法1. <table id="tt"></table>1. $('#tt').datagrid({2. url:'datagrid_data.json',3. columns:[[4. {field:'code',title:'Code',width:100},5. {field:'name',title:'Name',width:100},6. {field:'price',title:'Price',width:100,align:'right'}7. ]]8. });数据表格属性属性继承控制⾯板，以下是数据表格独有的属性。
名称类型描述默认值columns（列）array（数组）数据表格列配置对象，查看列属性以获取更多细节。
nullfrozenColumns（固定列）array（数组）跟列属性⼀样，但是这些列固定在左边，不会滚动。
nullfitColumns（⾃适应列宽）boolean（布尔型）设置为true将⾃动使列适应表格宽度以防⽌出现⽔平滚动。
falsestriped（显⽰条纹）boolean（布尔型）设置为true将交替显⽰⾏背景。
falsemethod（⽅法）string（字符串）请求远程数据的⽅法类型。
postnowrap（截取）boolean（布尔型）设置为true，当数据长度超出列宽时将会⾃动截取。
trueidField（id字段）string（字符串）表明该列是⼀个唯⼀列。
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
jquery⽤ajax⽅式从后台获取json数据后如何将内容填充到下拉列表对于问题从后台获取json数据，将内容填充到下拉列表，代码⾮常简单，具体过程请看下⾯代码。
需求：url:链接 par：ID sel：下拉列表选择器//获取下拉列表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>')});}以上代码很简单吧，此问题很easy的解决了。
Jquery 使⽤Ajax获取后台返回的Json数据页⾯处理过程具体实现过程请看下⾯代码⽰例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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@" };//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>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 创建测试数据源//创建DataTableprotected 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;}#endregionpublic 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('');//var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@" };//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 + "----" + ); //+ " - " + 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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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"><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(); = dt.Rows[i]["PARANAME"].ToString();list.Add(a);}context.Response.Write(new JavaScriptSerializer().Serialize(list));}}else if (Type == "save"){//反序列化jsonSystem.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;}}以上就是本⽂的全部内容，希望⼤家喜欢。
AJAX中的dataType（数据格式）-text、json
AJAX中的dataType（数据格式）-text、json因为经常使⽤数据格式，所以将它封装成类，J这样就不会⽤到时就写了，直接调⽤写好的类就可以了（1）dataType数据格式为：TEXT格式的数据是字符串的数据，在“ajax对数据进⾏删除和查看”的那篇博客中说过，这⾥在说下结果不会每个传输的都是字符串，有时是⼆维数组，这样就要转换为字符串格式了class DBDA{public $host="localhost"; //数据库连接public $uid="root"; //⽤户public $password="123"; //⽤户密码public $dbname="test2"; //⽤到的数据库名字//返回字符串的⽅法public function StrQuery($sql,$type=1) {$db = new MySQLi($this->host,$this->uid,$this->password,$this->dbname); //造⼀个新对象$r = $db->query($sql); //sql语句if($type==1) //判断语句{ $attr = $r->fetch_all(); $str = ""; foreach($attr as $v) { $str .= implode("^",$v)."|"; //拼接数组为字符串 } return substr($str,0,strlen($str)-1); //截取字符串：最后的拼接符不显⽰ }else{ return $r;}}}这就把转换字符串封装成了⼀个类：运⽤⼀下$.ajax({url:"xianshicl.php", //处理页⾯中进⾏查数据库dataType:"TEXT", //⽤的text的数据类型success: function(data){ //这⾥是处理页⾯执⾏结束后在执⾏的语句}})处理页⾯的查数据库<?phpinclude("DBDA.class.php"); //调⽤封装好的类⽂件$db = new DBDA(); //造新对象$sql = "select * from fruit"; //查数据库的内容语句echo $db->StrQuery($sql); //1.引⽤封装好的类中的转换字符串的⽅法/* //2.不想调⽤，可以⾃⼰写，不过就是⿇烦点，因为这样会每次⽤到时都要写$attr = $db->Query($sql);$str = "";foreach($attr as $v){ $str .= implode("^",$v)."|"; //拼接数组为字符串}echo substr($str,0,strlen($str)-1); //截取字符串：最后的拼接符不显⽰*/>这⾥是处理页⾯执⾏语句的效果：然后在ajax中进⾏拆分后就可以了：success: function(data){var hang = data.split("|"); //拆分字符“|”串：显⽰⾏var str = "";for(var i=0;i<hang.length;i++){var lie = hang[i].split("^"); //拆分字符串“^”:显⽰列str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td></tr>"; //直接找索引号}$("#bg").html(str); } （2）dataType数据格式为：JSON⽐较像关联数组：所以在引⽤时，数组是要关联数组的，不能是索引数组我们也把这个封装成⼀个类，既然是关联数组，在遍历时的函数值应该是fetch_all(MYSQLI_ASSOC)class DBDA{public $host="localhost"; //数据库连接public $uid="root"; //⽤户public $password="123"; //⽤户密码public $dbname="test2"; //⽤到的数据库名字//返回JSONfunction JSONQuery($sql,$type=1){ $db = new MySQLi($this->host,$this->uid,$this->password,$this->dbname); $r = $db->query($sql); //和字符串不同的地⽅ if($type==1) {//json是关联数组：fetch_all(MYSQLI_ASSOC)return json_encode($r->fetch_all(MYSQLI_ASSOC)); //转化成json：json_encode()必须是utf-8的服务 } else {return $r; }}}这就把json封装成了⼀个类：运⽤⼀下 $(document).ready(function(e) { $.ajax({url: "scl.php", //处理页⾯dataType:"json", //数据类型是JSONsuccess: function(data){//处理页⾯结束后执⾏的语句写这⾥ } })});处理页⾯的语句：<?phpinclude("DBDA.class.php"); //调⽤封装的类$db = new DBDA();$sql = "select * from fruit";echo $db->JSONQuery($sql); //这⾥就是引⽤的封装好的JSON⽅法执⾏下，看下这个⽅法和TEXT的区别（这个就是个数组，还是个关联的数组）处理页⾯执⾏成功后执⾏下⾯语句var str = "";for( var k in data){ str +="<option value='"+data[k].Ids+"'>"+data[k].Name+"</option>"; //找到k的Code，这⾥的Code要和数据库中的列名⼀致}$("#fruit").html(str);下⾯就把整体的效果看下，上⾯做了个下拉列表，找的是数据库中⽔果表的名称，如下：TEXT是直接遍历索引号，⽽JSON是列名str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td></tr>"; //直接找索引号str +="<option value='"+data[k].Ids+"'>"+data[k].Name+"</option>"; //找到k的Code，这⾥的Code要和数据库中的列名⼀致需要注意，JSON是关联数组，要⽤MYSQLI_ASSOC这个值，转换成JSON的⽅法是：json_encode()使⽤这个⽅法服务必须是utf-8的服务。
Ajax实现DataGridDataList动态ToolTip
Ajax实现DataGrid/DataList动态ToolTip1.建立一aspx页面，html代码2.cs代码using System.Data.SqlClient;using System.IO;protected void Page_Load(object sender, EventArgs e){if (!Page.IsPostBack){BindData();}if (ID != ""){GetDescriptionByID(ID);}}property#region propertyprivate string ID{get{if (Request["ID"] != null && Request["ID"].ToString() != "") {return Request["ID"];}else{return "";}}}#endregionGetDescriptionByID#region GetDescriptionByIDprivate void GetDescriptionByID(string ID){string connStr = ConfigurationSettings.AppSettings["ConnectionString"];SqlConnection conn = new SqlConnection(connStr);string sql = "select * from testimage where userid='" + ID + "'";SqlCommand cmd = new SqlCommand(sql, conn);conn.Open();SqlDataReader dr = cmd.ExecuteReader();string s = @"<table cellspacing='0' cellpadding='4' width='300' height='200' border='0' id='GridView1' style='color:#333333;border-collapse:collapse;'>";if(dr.Read()){s += "<tr style='color:#333333;background-color:#FFFBD6;'>";s += "<td width='50'>名称:</td>";s += "<td>" + dr["UserName"] + "</td>";s += "</tr>";s += "<tr style='color:#333333;background-color:White;'>";s += "<td scope='col'>描述:</td>";s += "<td>" + dr["Description"] + "</td>";s += "</tr>";}s += "</table>";dr.Close();conn.Close();this.Response.Write(s);this.Response.End();}#endregionsave image#region save imageprotected void Button2_Click(object sender, EventArgs e){Stream ImageStream;string Path = FileUpload1.PostedFile.FileName;// 文件名称int Size = FileUpload1.PostedFile.ContentLength; // 文件大小string Type = FileUpload1.PostedFile.ContentType; // 文件类型ImageStream = FileUpload1.PostedFile.InputStream;byte[] Content = new byte[Size];int Status = ImageStream.Read(Content, 0, Size);SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["ConnectionString"]); SqlCommand comm = new SqlCommand("insert into testimage (UserName,Image,Path,Type,Description) values(@UserName,@Image,@Path,@Type,@Description)", conn);mandType = CommandType.Text;comm.Parameters.Add("@UserName", SqlDbType.VarChar, 255).Value = txtUserName.Text;comm.Parameters.Add("@Image", SqlDbType.Image).Value = Content;comm.Parameters.Add("@Path", SqlDbType.VarChar, 255).Value = Path;comm.Parameters.Add("@Type", SqlDbType.VarChar, 255).Value = Type;comm.Parameters.Add("@Description", SqlDbType.VarChar, 2000).Value = this.TextBox1.Text;conn.Open();comm.ExecuteNonQuery();conn.Close();}#endregionBindData#region BindDataprivate void BindData(){string sql = "select * from testimage";DataSet ds = GetDataSet(sql);this.DataList1.DataSource = ds;this.DataList1.DataBind();}#endregionGetDataSet#region GetDataSetprivate DataSet GetDataSet(string sql){string constring = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"]; SqlDataAdapter sda = new SqlDataAdapter(sql, constring);DataSet ds = new DataSet();sda.Fill(ds);return ds;}#endregion3.数据库脚本if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[TestImage]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)drop table [dbo].[TestImage]GOCREATE TABLE [dbo].[TestImage] ([UserID] [int] IDENTITY (1, 1) NOT NULL ,[UserName] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,[Image] [image] NULL ,[Path] [nvarchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,[Type] [nvarchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,[Description] [nvarchar] (2000) COLLATE Chinese_PRC_CI_AS NULL) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]GO<html><head><title>WebForm1</title><style type="text/css">.logo {}{ POSITION: absolute }.dek {}{ Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute }</style> </head><body><Form runat="server"><DIV class="dek" id="dek"></DIV><script language="javascript">Xoffset=-20;Yoffset= 20;var nav,yyy=-1000;var skn=dek.style;document.onmousemove=get_mouse;//ajaxvar xmlHttp;function createXMLHttpRequest(){if (window.ActiveXObject){xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}else if (window.XMLHttpRequest){xmlHttp = new XMLHttpRequest();}}function startRequest(id){createXMLHttpRequest();xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "?ID="+id, true);xmlHttp.send(null);}var content;function handleStateChange(){if(xmlHttp.readyState == 4){if(xmlHttp.status == 200){content=xmlHttp.responseText;}}}//tooltipfunction popup(id){startRequest(id);yyy=Yoffset;document.all("dek").innerHTML=content;skn.visibility="visible"}function get_mouse(e){var x=event.x+document.body.scrollLeft;skn.left=x+Xoffset;var y=event.y+document.body.scrollTop;skn.top=y+yyy;}function kill(){yyy=-1000;skn.visibility="hidden";}</script><div><asp:FileUpload ID="FileUpload1" runat="server" /><br>名称:<asp:TextBox ID="txtUserName"runat="server"></asp:TextBox><br>描述:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br><asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="保存" /><asp:DataList id="DataList1"BorderColor="black"CellPadding="1"CellSpacing="4" HorizontalAlign="Center"RepeatColumns="4"RepeatLayout="Table"runat="server" ShowFooter="true" ShowHeader="true"width="100%"><ItemTemplate><%# DataBinder.Eval(Container.DataItem, "UserName")%><br><img ID="img1" onmouseover="popup(<%# DataBinder.Eval(Container.DataItem, "UserID")%>);" onmouseout="kill();" src='<%# DataBinder.Eval(Container.DataItem, "Path") %>' height='150'/></ItemTemplate></asp:DataList></div></Form></body></html>更多内容请仿问:。
ajax+json实例代码
ajax+json实例代码全文共四篇示例，供读者参考第一篇示例：# AJAX+JSON实例代码## 什么是AJAXAJAX（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术。
通过在不重新加载整个页面的情况下，与服务器进行数据交换，可以实现网页的异步更新。
AJAX可以提高用户体验，使用户可以在不影响页面加载速度的情况下获取最新的数据。
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。
它以易于读写的文本形式表示数据，通常用于客户端和服务器之间的数据传输。
JSON格式由键值对构成，通过大括号和冒号分割，具有良好的可读性和易解析性。
下面我们将通过一个简单的实例来演示如何使用AJAX和JSON进行数据交换。
### 实例说明我们将创建一个简单的网页，通过AJAX请求获取服务器端返回的JSON数据，并将数据展示在页面上。
在HTML文件中，我们创建一个按钮，当用户点击按钮时，会触发AJAX请求：```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX+JSON Example</title></head><body><button id="getData">Get Data</button><div id="result"></div><script src="ajax.js"></script></body></html>```然后，在JavaScript文件`ajax.js`中，编写AJAX请求的代码：在服务器端创建一个名为`data.json`的JSON文件，其中包含需要返回的数据：```json{"name": "John","age": 30}```将以上代码保存为相应的文件，并在浏览器中打开HTML文件。
jQuery AJAX和JSON例子
基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。
我们先来看一下html模板：<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"><tr><th>订单ID</th><th>客户ID</th><th>雇员ID</th><th>订购日期</th><th>发货日期</th><th>货主名称</th><th>货主地址</th><th>货主城市</th><th>更多信息</th></tr><tr id="template"><td id="OrderID"></td><td id="CustomerID"></td><td id="EmployeeID"></td><td id="OrderDate"></td><td id="ShippedDate"></td><td id="ShippedName"></td><td id="ShippedAddress"></td><td id="ShippedCity"></td><td id="more"></td></tr></table>一定要注意的就是里面所有的id属性，这个是一个关键。