jquery教程ajax请求json数据示例

jQuery使用ajax传递json对象到服务端及contentType的用法示例

jQuery使⽤ajax传递json对象到服务端及contentType的⽤法⽰例⽬录0、⼀般情况下，通过键值对的⽅式将参数传递到服务端0.1 客户端代码：0.2 服务端代码：0.3 在浏览器的⽹络中查看此次请求：1、ajax 传递复杂json对象到服务端1.1 ⽅法⼀：通过formdata传值，服务端通过key获取值；1.2 ⽅法⼆：通过formdata⽅式传值，服务端读取Request.InputStream;2、content-Type 对 mvc项⽬的重要性2.1 客户端代码：2.2 服务端代码：2.3 解决⽅案：（设置contentType）2.4 其他的解决⽅案：（修改服务端代码）本⽂实例讲述了jQuery使⽤ajax传递json对象到服务端及contentType的⽤法。

分享给⼤家供⼤家参考，具体如下：0、⼀般情况下，通过键值对的⽅式将参数传递到服务端0.1 客户端代码：$.ajax({url: 'TestHandler.ashx',type: 'post',data: {name: "admin",age: 10},dataType: 'text',success: function (data) {alert(data);}})0.2 服务端代码：public void ProcessRequest(HttpContext context){string bodyText = string.Empty;using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)){bodyText = bodyReader.ReadToEnd();}string name= context.Request["name"].ToString();// "admin"string age = context.Request["age"].ToString();// "10"context.Response.ContentType = "text/plain";context.Response.Write(bodyText);// "name=admin&age=10"}0.3 在浏览器的⽹络中查看此次请求：从上⾯的截图中可以看出，post请求，是将formdata中键值对⽤符号“&”相连，拼接成⼀个字符串，传递到服务端，服务端可以通过key来获取值，或从request的body中读取整个字符串；1、ajax 传递复杂json对象到服务端1.1 ⽅法⼀：通过formdata传值，服务端通过key获取值；客户端代码：var user1 = {username: 'admin',age: 10};var user2 = {username: 'test',age: 11};var userArr = [];userArr.push(user1);userArr.push(user2);$.ajax({url: 'TestHandler.ashx',type: 'post',//contentType: 'application/json',//contentType:"application/x-www-form-urlencoded; charset=UTF-8",data: {Users: JSON.stringify(userArr)},dataType: 'text',success: function (data) {alert(data);}})服务端代码：public void ProcessRequest(HttpContext context){string contentType= context.Request.ContentType;// "application/x-www-form-urlencoded; charset=UTF-8"string users = context.Request["Users"].ToString();dynamic obj = JsonConvert.DeserializeObject(users);context.Response.ContentType = "text/plain";context.Response.Write(obj[0].username);// "admin"}1.2 ⽅法⼆：通过formdata⽅式传值，服务端读取Request.InputStream;前端代码：var user1 = { username: 'admin', age: 10 };var user2 = { username: 'test', age: 11 };var userArr = [];userArr.push(user1);userArr.push(user2);$.ajax({url: 'TestHandler.ashx',type: 'post',//contentType: 'application/json',//contentType:"application/x-www-form-urlencoded; charset=UTF-8",data: JSON.stringify(userArr),dataType: 'text',success: function (data) {alert(data);}})服务端代码：public void ProcessRequest(HttpContext context){string contentType= context.Request.ContentType;//"application/x-www-form-urlencoded; charset=UTF-8"string bodyText = string.Empty;using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)){bodyText = bodyReader.ReadToEnd();// [{"username":"admin","age":10},{"username":"test","age":11}]}dynamic obj = JsonConvert.DeserializeObject(bodyText);context.Response.ContentType = "text/plain";context.Response.Write(obj[0].username);// "admin"}通过浏览器查看此次请求：从图中可以看出，content-Type 为application/x-www-form-urlencoded，所以浏览器尝试将传输的数据解析成key-value的形式，但实际在ajax中的data中设置的是⼀个json字符串，⽆法解析成key-value的形式，故在服务端⽆法通过key来获取值；只能从Request.InputStream获取。

jQuery ajax - ajax() 使用方法和示例

实例通过 AJAX 加载一段文本： jQuery 代码： $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"",async:false}); $("#myDiv").html(htmlobj.responseText); }); });HTML 代码： <div id="myDiv"><h2>321 导航</h2></div> <button id="b01" type="button"></button>亲自试一试定义和用法ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。

简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建的 XMLHttpRequest 对象。

大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

语法jQuery.ajax([settings])参数 settings描述可选。

用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

参数 options 类型：Object可选。

AJAX 请求设置。

所有选项都是可选的。

async 类型：Boolean 默认值: true。

默认设置下，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

jQuery ajax - getJSON() 方法

jQuery Ajax 参考手册实例使用 AJAX 请求来获得 JSON 数据，并输出结果：$("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); }); });亲自试一试定义和用法通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中，您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 "myurl?callback=?"。

jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

注意：此行以后的代码将在这个回调函数执行前执行。

语法jQuery.getJSON(url,data,success(data,status,xhr))参数描述必需。

规定将请求发送的哪个 URL。

可选。

规定连同请求发送到服务器的数据。

可选。

规定当请求成功时运行的函数。

额外的参数：urldatasuccess(data,status,xhr)  response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象详细说明该函数是简写的 Ajax 函数，等价于：$.ajax({ url: url, data: data, success: callback, dataType: json });发送到服务器的数据可作为查询字符串附加到 URL 之后。

如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。

通过jquery的ajax请求本地的json文件方法

通过jquery的ajax请求本地的json⽂件⽅法⾃⼰学习jquery的ajax的经历，记录⼀下ajaxTestDemo.html在body⾥⾯放⼀个id为test的div<div id="test"></div>第⼀步还是要先加载jquery⽂件 jquery.min.js<script>$(function(){$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script>shuju.json⽂件{"list":[{"item":"审计管理"},{"item":"菜单管理"},{"item":"订单管理"},{"item":"合同管理"},{"item":"物流管理"},{"item":"⾏政管理"},{"item":"⼈事管理"},{"item":"购物管理"},{"item":"批发管理"},{"item":"安全管理"},{"item":"账号管理"},{"item":"财务管理"},{"item":"其他管理"}]}/* json⽂件⾥竟然不能有这样的注释，因为困扰了⼏个⼩时！*/完整的页⾯代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试jquey的ajax⽅法</title><style>*{padding:0;margin:0;}#test{padding: 0;margin: 0 auto;width:200px;height: 400px;}#test li{list-style: none;width:200px;text-align: center;height:30px;line-height:30px;border:1px dashed lightgrey;}</style></head><body><div id="test"></div><script src="js/jquery.min.js"></script><script>$(function(){alert(1);$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script></body></html>还可以通过$.getJSON来获取本地json⽂件/* getJSON*/$(function(){$.getJSON("./data/shuju.json",function(data){var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);});});以上这篇通过jquery的ajax请求本地的json⽂件⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

jQuery中ajax请求后台返回json数据并渲染HTML的方法

jQuery中ajax请求后台返回json数据并渲染HTML的⽅法html实例<table border="0" class="restaurant_food" cellspacing="0" cellpadding="1"><input type="text" name="dishes" value="" class="seek_product" placeholder="请输⼊菜名"/><button type='button' class="btn_nor" onclick="seek_product()">搜索</button><tr><th width="30%">序号</th><th width="70%">菜名</th></tr><tr data-id=""><td></td><td class="tl"> <p></p></td></tr></table>jquery实例function seek_product(){var product = $('.seek_product').val();$.ajax({type:'get',url:'/Cash/Index/seek_product',data:{name:product},success:function(res){var data = eval('('+res+')');var len = data.length;var cm = "";if(len > 0){for(var i = 0; i < len; i++){cm += '<tr data-id='+data[i]['id']+'>';cm += '<td>';cm += i+1;cm += '</td>';cm += '<td class="tl">';cm += '<p>'+data[i]["name"]+'</p>';cm += '</td>';cm += '</tr>';console.log(cm);$('.restaurant_food').html(cm);}}else{$('.restaurant_food').html('抱歉，没有这道菜！');}}})}php实例//搜索菜public function seek_product(){$shop_id = session("cashShopId");$name = I('');$map['name'] = array('like','%'.$name.'%');$map['shop_id'] = $shop_id;$map['status'] = 1;$productList = M('product')->field('id,name')->where($map)->select();echo json_encode($productList);}以上这篇jQuery中ajax请求后台返回json数据并渲染HTML的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

Jquery发送ajax请求以及datatype参数为textJSON方式

Jquery发送ajax请求以及datatype参数为textJSON⽅式Jquery发送ajax请求以及datatype参数为text/JSON⽅式1、⽅式⼀：datatype:'text'2、⽅式⼆：datatype:'JSON'3、使⽤gson-1.5.jar包和json-2.2.jar包处理JSON代码（注：使⽤json-2.2.jar包时，传给前端的结果，获取时不是json对象，需要var json = eval_r("("+data+")");转义⼀下。

⽽使⽤gson-1.5.jar包时，传给前端的结果就是json对象。

⽆需进⾏转义。

）1、⽅式⼀：datatype:'text'1.1 页⾯端的ajax请求：$.ajax({type: "POST",url: "<%=basePath%>getAllUser.action?randomNum="+new Date().getTime(),data : {},datatype : 'text',cache: false,async: false,success:function(data) {strHtml = data的处理结果; //对data数据进⾏处理，拼接成html代码块$("#userList").html(strHtml); //也可以使⽤：$("#userList").append(strHtml);}},error:function(){alert("获取⽤户信息失败，请联系管理员！");}});//end ajax1.2 后台java代码处理：public String getAllUser(){response.setContentType("text;charset=UTF-8");// 设置返回的⽂档类型response.setHeader("Cache-Control", "no-cache");response.setCharacterEncoding("UTF-8");PrintWriter out = null;String text = "";try {out = response.getWriter();} catch (Exception e) {text = "false";logger.error(e.getMessage());}//TODO 获取所有⽤户信息，遍历//text = "userId1,userId2,userId3";out.print(text);out.flush();out.close();return null;}2、⽅式⼆：datatype:'JSON'2.1 页⾯端的ajax请求：$.ajax({type: "POST",url: "<%=basePath%>getAllUser.action",datatype : 'JSON',cache:false,success : function(data) {$.each(data,function(entryIndex,entry){var userId=entry.id;var userName=erName;......// TODO strHtml = 构造显⽰的html代码块;// 以追加⽅式进⾏填充内容$("#userList").append(strHtml);});//end each}// end success2.2 后台java代码处理：public String getAllUser() throws Exception {try {response = ServletActionContext.getResponse();response.setContentType("application/json");response.setCharacterEncoding("gbk");List<User> userList = new ArrayList<User>();for (int i = 0; i < size; i++) {User user = new User();user.setUserId(i);user.setUserName("kobicc" + i);......//这个逻辑需要从数据库中获取结果即可。

jqueryajax调用springboot接口发送json数据示例，兼容跨域调用，解决m。。。

jqueryajax调⽤springboot接⼝发送json数据⽰例，兼容跨域调⽤，解决m。

本⽂主要解决三个问题：1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题2.解决spring boot开发的微服务接⼝中的跨域问题3.ajax 发送json数据的问题昨天研究 office 外接程序开发时，发现在插件中调⽤后台由 Spring boot 开发的接⼝并传递json时总是失败，调试了半天，尝试了$.ajax，$.post等⽅法服务端均⽆法获取到正确的请求，发送到后端的请求的格式是application/www-urlencode，⽽后端接受的是application/json格式的数据，由于⽤postman测试接⼝可以正常返回，应该可以说明后台接⼝没有问题。

1.解决maven项⽬中引⽤本地lib⽬录的jar包时打包失败的问题其实在⼀开始编写后台接⼝时，也遇到了⼀些问题，因为接⼝中引⽤了⼀个项⽬本地的lib⽬录中的jar包，⽽这个jar包并未⽤maven管理，所以调试和打包上遇到了⼀些问题，以前使⽤mvn clean install就可以完成的动作，现在⼀直报错，在pom中这样修改就可以解决了：<build><resources><resource><directory>lib</directory><targetPath>/BOOT-INF/lib/</targetPath><includes><include>**/*.jar</include></includes></resource></resources><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><configuration><skip>true</skip></configuration></plugin><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-surefire-plugin</artifactId><configuration><skip>true</skip></configuration></plugin></plugins></build>2.解决spring boot开发的微服务接⼝中的跨域问题由于服务端⽇志中⼀直观察不到ajax调⽤的正确请求，于是祭出终极⼤杀器——抓包，打开WireShark，选择对应的⽹卡，参数设置成：ip.dst_host== 你接⼝服务器的ip && tcp.dstport ==你接⼝服务监听的端⼝抓包后发现，第⼀个HTTP请求竟然不是POST，⽽是OPTIONS：这不是我嘞个⼤擦了么…… ⽴马拿出万能钥匙——⾕歌搜索引擎开始解决问题，输⼊关键字“http options request”，看到第⼀条就应该是我要的答案了：沿着指路明灯给出的航向继续前进（）：OPTIONSThe HTTP OPTIONS method requests permitted communication options for a given URL or server. A client can specify a URL with thismethod, or an asterisk (*) to refer to the entire server.继续往下翻，看到了这段⽂字：In , a is sent with the OPTIONS method so that the server can respond if it is acceptable to send the request. In this example, we will request permission for these parameters:The header sent in the preflight request tells the server that when the actual request is sent, it will have a request method.The header tells the server that when the actual request is sent, it will have the X-PINGOTHER and Content-Type headers.我恍然⼤悟，原来是跨域调⽤的问题。

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属性，这个是一个关键。

ajax请求的例子

ajax请求的例子Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用的技术。

它通过在后台与服务器进行数据交换，实现页面的异步更新，避免了页面的重新加载，提高了用户体验。

下面将为大家介绍一些使用Ajax进行数据请求的例子。

例子一：获取用户信息假设我们有一个网页，需要获取用户的姓名和年龄。

我们可以使用Ajax发送请求，将用户信息发送给服务器，并在页面上显示出来。

以下是使用jQuery库实现的示例代码：```javascript$.ajax({url: "/user",type: "GET",dataType: "json",success: function(response) {var name = ;var age = response.age;$("#name").text(name);$("#age").text(age);}});例子二：搜索功能假设我们有一个搜索框，用户可以在其中输入关键词，并实时获取相关的搜索结果。

以下是一个使用Ajax实现的搜索功能的示例代码：```javascript$("#search-input").on("input", function() {var keyword = $(this).val();$.ajax({url: "/search",type: "GET",data: { keyword: keyword },dataType: "json",success: function(response) {var results = response.results;$("#search-results").empty();for (var i = 0; i < results.length; i++) {$("#search-results").append("<li>" + results[i] + "</li>");}}});});例子三：加载更多内容假设我们有一个新闻网站，页面上只显示了部分新闻内容，用户可以点击“加载更多”按钮来获取更多的新闻。

php基于jquery的ajax技术传递json数据简洁实例_

php基于jquery的ajax技术传递json数据简洁实例_本文实例讲解并描述了php基于jquery的ajax技术传递json数据简洁实现方法。

分享给大家供大家参考，具体如下：html页面：htmlheadmeta http-equiv="content-type" content="text/html;charset=utf-8" /script type="text/javascript" src="jquery-1.8.2.min.js"/scriptscript type="text/javascript"$(function(){$("#send").click(function(){var cont = $("input").serialize();$.ajax({url:'ab.php',type:'post',dataType:'json',data:cont,success:function(data){var str = ername + data.age + data.job; $("#result").html(str);}});});});/script/headbodydiv id="result"一会看显示结果/divform id="my" action="" method="post"pspan姓名：/span input type="text" name="username" //ppspan年龄：/spaninput type="text" name="age" //p pspan工作：/spaninput type="text" name="job" //p /formbutton id="send"提交/button/body/htmlphp页面：?phpheader("Content-type:text/html;charset=utf-8");$username = $_POST['username'];$age = $_POST['age'];$job = $_POST['job'];$json_arr = array("username"=$username,"age"=$age,"job"=$job); $json_obj = json_encode($json_arr);echo $json_obj;?用法post方式:script type="text/javascript"$(function(){$("#send").click(function(){var cont = {username:$("input")[0].value,age:$("input")[1].val ue,job:$("input")[2].value};var url = 'ab.php';$.post(url,cont,function(data){var res = eval("(" + data + ")");//转为Object对象var str = ername + res.age + res.job;$("#result").html(str);});});});/script盼望本文所述对大家PHP程序设计有所关心。

基于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属性，这个是一个关键。

使用Ajax获取本地json数据

使⽤Ajax获取本地json数据⼀、使⽤原⽣ajax获取本地JSON⽂件中的数据1）创建json数据⽂件，⽂件名：demo.jsontext.json内的数据代码如下：{"person":{"name":"tom","age":18}}2）HTML⽂档中的代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index</title></head><body><script>var xhr="";//声明变量容纳XMLHttpRequest对象//封装XMLHttpRequest对象创建⽅法（⽤于兼容低版本IE浏览器）function createXHR(){if(new window.XMLHttpRequest){//如果浏览器⽀持对象XMLHttpRequestxhr=new XMLHttpRequest();}else{xhr=new ActiveXObject("Microsoft.XMLH");//低版本IE使⽤ActiveXObject}}createXHR();//调⽤函数以创建XMLHttpRequest对象//使⽤XMLHttpRequest对象发送请求xhr.open("get","./demo.json",false);//创建请求xhr.send(null);//发送请求//获取返回的json数据，var personStr=xhr.responseText;//返回的数据都是字符串，不具备对象⽅法var per=JSON.parse(personStr);//使⽤JSON.parse⽅法将字符串数据转换为javascript对象console.log()//tom</script></body></html>⼆、使⽤Ajax获取本地json⽂件中的数据（注：使⽤jquery获取json中的数据，不需要再使⽤JSON.parse()将数据转为javascript对象）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>index</title><script src="/ajax/jquery/jquery-1.8.0.js"></script></head><body><script>$(document).ready(function(){$.ajax({type: "get",//请求类型datatype: "json",//数据类型url: "./demo.json",//向哪⾥请求success: function(data){//请求成功后执⾏该函数console.log()//tom}})})</script></body></html>另、获取HTML⽂档内部的JSON数据<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</title></head><body><script>var jsonData='{"name": "tom","age": 18}';//创建json数据var per=JSON.parse(jsonData);//将json数据转换为javascript对象console.log()//tom</script></body></html>。

jQuery实例之ajax请求json数据案例

jQuery实例之ajax请求json数据案例今天有这样⼀个需求，点击六个⼤洲，出现对应的⼀些请求信息，展⽰在下⾯，请求请求过后，第⼆次点击就⽆需请求。

如图所⽰：点击北美洲下⾯出现请求的⼀些数据html代码结构：<div class="conSixmap"><div class="name conmap01" data-name="beimeizhou"><a href="javascript:void(0)">北美洲</a><div class="condetail"></div></div><div class="name conmap02" data-name="nanmeizhou"><a href="javascript:void(0)">南美洲</a><div class="condetail"></div></div><div class="name conmap03" data-name="ouzhou"><a href="javascript:void(0)">欧洲</a><div class="condetail"></div></div><div class="name conmap04" data-name="feizhou"><a href="javascript:void(0)">⾮洲</a><div class="condetail"></div></div><div class="name conmap05" data-name="yazhou"><a href="javascript:void(0)">亚洲</a><div class="condetail"></div></div><div class="name conmap06" data-name="dayangzhou"><a href="javascript:void(0)">⼤洋洲</a><div class="condetail"></div></div></div>css样式：.conSixmap{position:relative;width:678px;height:335px;margin:0 auto;background:url(../images/tuanduimapBg.png) no-repeat;color:#000;font-family:"微软雅⿊"}.conSixmap .name .condetail{display:none;position:absolute;z-index:10;width:216px;padding:10px;left:50%;margin-left:-118px;top:54px;background:url(../images/opcity83.png) repeat;border-radius:5px;} .conSixmap .condetail span{display:block;color:#fff;font-size:14px;text-align:left;}.conSixmap .name{position:absolute;width:52px;height:55px;}.conSixmap .name a{display:block;z-index:2;position:absolute;padding-top:35px;text-align:center;cursor:pointer;width:52px;height:20px;color:#000;font-size:12px;}.conSixmap .conmap01{left:91px;top:73px;}.conSixmap .conmap01 a{background:url(../images/beimeipicBg.png) no-repeat top center;}.conSixmap .conmap02 {left:180px;top:213px;}.conSixmap .conmap02 a{background:url(../images/nanmeimapbg.png) no-repeat top center;}.conSixmap .conmap03 {left:339px;top:68px;}.conSixmap .conmap03 a{background:url(../images/ouzhoumapBg.png) no-repeat top center;}.conSixmap .conmap04{left:327px;top:158px;}.conSixmap .conmap04 a{background:url(../images/feizhoumapbg.png) no-repeat top center;}.conSixmap .conmap05 {left:480px;top:75px;}.conSixmap .conmap05 a{background:url(../images/yazhoumapBg.png) no-repeat top center;}.conSixmap .conmap06 {left:545px;top:220px;}.conSixmap .conmap06 a{background:url(../images/dayangmapbg.png) no-repeat top center;}json格式：{"beimeizhou": ["请求的json数据1","请求的json数据2"],"nanmeizhou": ["请求的json数据3","请求的json数据4"],"ouzhou": ["请求的json数据5","请求的json数据6","请求的json数据7","请求的json数据8"],"feizhou": ["请求的json数据9","请求的json数据10","请求的json数据11","请求的json数据12"],"yazhou": ["请求的json数据13","请求的json数据14"],"dayangzhou": ["请求的json数据15","请求的json数据16"]}js代码：$(document).ready(function(){//添加地图var stauteArr={'beimeizhou':'true','nanmeizhou':'true','ouzhou':'true','feizhou':'true','yazhou':'true','dayangzhou':'true'};$(".conSixmap .name").on('click',function(){var _this=this;var htmlcon="";$(this).siblings(".name").children(".condetail").fadeOut(500); $(this).children(".condetail").fadeIn(500);var _name=$(this).attr('data-name');//当前请求过后不需要请求if(stauteArr[_name] =='false'){return;}$.ajax({url:"js/schoolMap.json",type:'get',data:{},dataType:"json",success: function(data){for(var i in data){if(_name==i){console.log(data[i]);for(var j=0;j<data[i].length;j++){htmlcon+="<span>"+data[i][j]+"</span>";}$(_this).children(".condetail").append(htmlcon);stauteArr[i]='false';}}},error: function(){alert('请求失败，请检查⽹络');}});});});。

jquery ajax实例代码

Jquery Ajax 实例代码1. 简介Jquery 是一种流行的 JavaScript 库，它提供了许多简化 DOM 操作和事件处理的方法。

Ajax（Asynchronous JavaScript and XML）是一种利用 JavaScript 和 XML 实现异步数据交换的技术。

Jquery 的Ajax 方法为我们提供了简洁方便的方式来使用 Ajax 技术，实现页面的局部刷新和与服务器端的数据交互。

2. Jquery Ajax 方法Jquery 提供了一系列的 Ajax 相关方法，最常用的包括以下几个：- $.ajax()：最通用的 Ajax 方法，可以实现各种类型的 Ajax 请求。

- $.get()：发送 GET 请求。

- $.post()：发送 POST 请求。

- $.load()：从服务器加载数据，并将返回的数据放入指定的元素中。

3. 实例代码下面是一个简单的 Jquery Ajax 实例，演示了如何使用 Jquery 的$.ajax() 方法发送一个 GET 请求，并处理返回的数据。

```html<!DOCTYPE html><html><head><title>Jquery Ajax 实例</title><script src=""></script></head><body><button id="loadData">加载数据</button> <div id="result"></div><script>$(document).ready(function(){$("#loadData").click(function(){$.ajax({url: "data.json",type: "GET",success: function(data){$("#result").html(data);},error: function(){$("#result").html("数据加载失败");}});});});</script></body></html>```4. 解析- 页面上有一个按钮和一个用于显示结果的 div 元素。

jquery的ajax和getJson跨域获取json数据的实现方法

jquery的ajax和getJson跨域获取json数据的实现⽅法很多开发⼈员在使⽤jquery在前端和服务器端进⾏数据交互，所以很容易会认为在前端利⽤jquery就可以读取任何站点的数据了。

近⽇在进⾏开发时，因为要和第三⽅公司的⼀个项⽬进⾏数据的共享，因为考虑多不占⽤服务器的资源，遂决定直接在html进⾏数据的读取，不⾛服务器端进⾏中转了。

然后正好就遇到了浏览器端跨域访问的问题。

跨域的安全限制都是指浏览器端来说的，服务器端不存在跨域安全限制的问题。

jsonp是英⽂json with padding的缩写。

它允许在服务器端⽣成script tags⾄返回⾄客户端，也就是动态⽣成javascript标签，通过javascript callback的形式实现数据读取。

html页⾯端⽰例代码：复制代码代码如下://⾸先要引⼊jquery的js包jQuery(document).ready(function(){$.ajax({type : "get", //jquey是不⽀持post⽅式跨域的async:false,url : "/apitools/ajax_props.do", //跨域请求的URLdataType : "jsonp",//传递给请求处理程序，⽤以获得jsonp回调函数名的参数名(默认为:callback)jsonp: "jsoncallback",//⾃定义的jsonp回调函数名称，默认为jQuery⾃动⽣成的随机函数名jsonpCallback:"success_jsonpCallback",//成功获取跨域服务器上的json数据后,会动态执⾏这个callback函数success : function(json){alert(json);}});});服务器端⽰例代码，以java为例：服务器端代码，是重点，开始以为，只要客户端通过jsonp就可以直接跨域访问，其实不然，需要服务器端的⽀持才⾏。

JqueryAjax提交json数据

JqueryAjax提交json数据在MVC控制器(这⾥是TestController)下有⼀个CreateOrder的Action⽅法[HttpPost]public ActionResult CreateOrder(List<Person> model){return View();}其中Person类如下：public class Person{public string Name { get; set; }public string IDCard { get; set; }}这⾥类似购买⽕车票的⼀个场景，购买票的时候要求提供所有乘车⼈的信息（姓名、⾝份证号码）前台视图的代码如下：@{Layout = null;}<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><title>CreateOrder</title></head><body><input type="button" value="提交订单" id="btnSubmit"/>@Scripts.Render("~/bundles/jquery")<script type="text/javascript">var persons = [{ Name: "张三", IDCard:"44111111"},{Name:"姣婆莲",IDCard:"33222222"}];$(function () {$("#btnSubmit").click(function () {$.ajax({url: '@Url.Action("CreateOrder","Test")',type: 'POST',data: persons,success: function (responseText) {}});});});</script></body></html>View Code点击按钮时发起Ajax请求，提交json数据，json数据包含了两位乘客信息(这⾥只是演⽰数据的提交，不讨论⾝份证号码的合法性)当点击按钮时，在开发⼈员⼯具中看到发起了Ajax请求，但是表单数据不是json数据⽽在调试中也可以监视到参数model是null从开发⼈员⼯具中可以看到，请求头是Content-Type:application/x-www-form-urlencoded; charset=UTF-8 ，⽽实际应该是Content-Type:application/json; charset=UTF-8于是对视图作修改：@{Layout = null;}<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><title>CreateOrder</title></head><body><input type="button" value="提交订单" id="btnSubmit"/>@Scripts.Render("~/bundles/jquery")<script type="text/javascript">var persons = [{ Name: "张三", IDCard:"44111111"},{Name:"姣婆莲",IDCard:"33222222"}];$(function () {$("#btnSubmit").click(function () {$.ajax({url: '@Url.Action("CreateOrder","Test")',type: 'POST',data:JSON.stringify(persons),contentType:"application/json;charset=utf-8",success: function (responseText) {}});});});</script></body></html>View Code修改视图后，刷新页⾯，点击按钮再次发起请求成功。

jQueryajax读取本地json文件的实例

jQueryajax读取本地json⽂件的实例json⽂件{"first":[{"name":"张三","sex":"男"},{"name":"李四","sex":"男"},{"name":"王武","sex":"男"},{"name":"李梅","sex":"⼥"}]}js：⽅法⼀：$.ajax({url: "ceshi.json",//json⽂件位置type: "GET",//请求⽅式为getdataType: "json", //返回数据格式为jsonsuccess: function(data) {//请求成功完成后要执⾏的⽅法//each循环使⽤$.each⽅法遍历返回的数据date$.each(data.first, function(i, item) {var str = '<div>姓名:' + + '性别：' + item.sex + '</div>';document.write(str);})}})⽅法⼆：jQuery.getJSON()是jQuery.ajax()函数的简写形式// jQuery.getJSON( url [, data ] [, success ] )$.getJSON("ceshi.json", "", function(data) { //each循环使⽤$.each⽅法遍历返回的数据date$.each(data.first, function(i, item) {var str = '<div>姓名:' + + '性别：' + item.sex + '</div>';document.write(str);})});以上这篇jQuery ajax读取本地json⽂件的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

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;}}}<%@ 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;}}以上就是本⽂的全部内容，希望⼤家喜欢。