商业源码 jquery里ajax中怎么将函数中的数据提取出来，放在另外一个其他函数中使用？
1、新建一个html文件，命名为testhtml。
2、在testhtml文件内，使用form标签创建一个表单，并使用input创建一个用户名输入框，一个密码输入框。
3、在testhtml文件内，创建一个button按钮，用于点击提交表单内容，当按钮被点击时，执行subform()函数。
4、在js标签内，创建subform()函数，在函数内，通过id分别获得文本框和密码框对象，通过val()方法获得输入的内容。
5、在js标签内，使用“$ajax()”来实现ajax提交表单内容。url为提交数据至服务器的连接，type为传输数据的类型，data为数据的内容，success为服务器接收数据后返回的内容，通过if实现提交成功与否的判断。
6、在浏览器打开testhtml文件，点击按钮，查看结果。
本文给大家分享一下，如何使用ajax读取Json中的数据。
一、基础知识
什么是json？
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言
JSON 具有自我描述性，更易理解
JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
JSON - 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
二、读取Json中的数据
首先我编写了一个Json的文件，里面有内容。注意格式。
图一 编写json的文件
然后，编写html代码，并引用ajax。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "http://wwww3org/TR/xhtml1/DTD/xhtml1-transitionaldtd">
<html xmlns="http://wwww3org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用AJAX异步读取json</title>
<script src="ajaxjs">
</script>
<script>
windowonload=function()
{
/获得按钮/
var aBtn=documentgetElementById('btn1');
//给按钮添加点击事件
aBtnonclick=function()
{
//调用ajax函数
ajax('datajson',function(str){
//将JSON 数据来生成原生的 JavaScript 对象
var arr=eval(str);
alert(arr[0]b);
});
};
};
</script>
</head>
<body>
读取json里面的数据 <br />
<input id="btn1" type="button" value="读取json里面的数据" />
</body>
</html>
封装的AJAX函数代码如下：
/
AJAX封装函数
url：系统要读取文件的地址
fnSucc：一个函数，文件取过来，加载完会调用
/
function ajax(url, fnSucc, fnFaild)
{
//1创建Ajax对象
var oAjax=null;
if(windowXMLHttpRequest)
{
oAjax=new XMLHttpRequest();
}
else
{
oAjax=new ActiveXObject("MicrosoftXMLHTTP");
}
//2连接服务器
oAjaxopen('GET', url, true);
//3发送请求
oAjaxsend();
//4接收服务器的返回
oAjaxonreadystatechange=function ()
{
if(oAjaxreadyState==4) //完成
{
if(oAjaxstatus==200) //成功
{
fnSucc(oAjaxresponseText);
}
else
{
if(fnFaild)
fnFaild(oAjaxstatus);
}
}
};
}
接下来就是要读取出文件内容，在这之前，有一点要提的是，AJAX是从服务器上读取文件，所以要把写好的JSON文件放到服务器的路径下，可能初学者接触过的服务器只有IIS，他的文件路径是C:\inetpub\wwwroot\aspnet_client\system_web，只要把Json放到这个路径下，然后用localhost来访问服务器，就可以了。
图二 读取效果图
1原生AJAX代码
get请求:
//创建xhr,IE低版本不支持
var xhr = new XMLHttpRequest();
//servlet地址
var url="/Website01/indexview";
xhropen("get", url, true);
//xhr处理事件,异步
xhronreadystatechange = function() {
if (xhrreadyState == 4 && xhrstatus == 200) {
//在这里进行相关处理,通过xhrresponseText获取后台反馈的文本
}
};
//xhr发送数据
xhrsend();
post请求:
post请求需注意要设置请求头（setRequestHeader）
xhrsetRequestHeader(“Content-type”, “application/json”);针对JSON数据
在xhrsend()中写需要发送的JSON数据，例如:
xhrsend(JSONstringify(data));1
2Servlet基础知识
Servlet是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据，生成动态Web内容。狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。
Servlet运行于支持Java的应用服务器中(Tomcat)。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。
在Java中，新建Servlet类继承自HttpServlet，重写doGet方法处理get请求，重写doPost方法，处理post请求，通过
PrintWriter out = responsegetWriter();通过outwrite()输出数据到前台的xhrresponseText，通过outprintln()输出页面。
3Servlet处理请求
处理请求通过HttpServletRequest类型，Get请求时查询字符串直接编码在请求链接中，格式为url+”key1=value1&key2=value2”，通过getParameter(“key1”)来获取值。
4前后端传递JSON数据
前端传递JSON给Servlet
//程序片段,请求头不能少
xhrsetRequestHeader("Content-type", "application/json");
var data={"name":"Tom","age":20};
xhrsend(JSONstringify(data));1234
后端接受前端传递的JSON数据
//读取请求传递过来的JSON格式数据，返回JSON字符串
private String readJSONData(HttpServletRequest request) {
StringBuffer json=new StringBuffer();
String lineString=null;
try {
BufferedReader reader=requestgetReader();
while ((lineString=readerreadLine())!=null) {
jsonappend(lineString);
}
} catch (Exception e) {
Systemoutprintln(etoString());
}
return jsontoString();
}
String json=readJSONData(request);
//将json字符串转为java对象
Gson gson=new Gson();
Person person=gsonfromJson(json, Personclass);
说明
Gson为google处理JSON格式数据的jar包，可将JSON字符串转换为对应的Java对象，也可将相应的Java对象序列化为JSON字符串。Person为定义的类，包含name和age字段。readJSONData函数将前端请求中的JSON数据转为java对象。
后端输出JSON到前端
//后端程序片段，传递json数据给前端
Person person=new Person("Tom",20);
Gson gson=new Gson();
String json=gsontoJson(person);
outwrite(json);
//前端程序片段，通过ajax获取json数据
var xhr = new XMLHttpRequest();
var url="/Website01/indexview";
xhropen("get", url, true);
xhronreadystatechange = function() {
if (xhrreadyState == 4 && xhrstatus == 200) {
//获取后台传递过来的字符串并转换为json
var responseJson=JSONparse(xhrresponseText);
var name=responseJsonname;
var age=responseJsonage;
}
};
xhrsend(null);
5表单数据的处理
<form method="post" action="/Website01/indexview">
<label>Name:</label><input type="text" id="name1" name="name"><br>
<label>Age:</label><input type="number" id="age1" name="age"><br>
<input type="submit" id="submit" value="提交">
</form>12345
表单数据可以直接在form属性中定义请求方法和请求路径，在点击submit按钮后数据会直接提交并跳转。如上的表单，在点击按钮提交后，后台使用requestgetParameter(“key”)获取数据，key值为input标签的name值，而非id值，即通过以下代码获取表单提交的数据。
String name=requestgetParameter("name");
String age=requestgetParameter("age");12
以上。
写js调用jqueryformjs，对form表单进行ajax提交
$(document)ready(function() {
var options = {
target: '#output1',
// 从服务传过来的数据显示在这个div内部
也就是ajax局部刷新
beforeSubmit: showRequest,
// ajax提交之前的处理
success: showResponse
// 处理之后的处理
};
$('#showDataForm')submit(function() {
$(this)ajaxSubmit(options);
return false;
//非常重要，如果是false，则表明是不跳转
//在本页上处理，也就是ajax，如果是非false，则传统的form跳转。
});
});
$ajax({
type: 'get', //ajax的方式 get/post
cache: false, //是否缓存
dataType: 'json', //接收返回数据的方式
url: "<=site_url('vod/admin/vod/type_i')>"+stype, //路径
timeout: 3000, //超时时间
success:function(data){ //成功后返回的回调方法
var json // data就是后台返回的数据
}
})
第一个问题：先搞清ajax的底层通信形式，ajax发出请求后等待回复，也就是监听某个信息端口，服务器接到请求后，发送结果，也就是向某个端口写信息，所以，不管在形式上编程上有什么不同，都是向这个ajax所在地的信息端口输出信息。
第二个问题，response==0是将response转换为int类型再对比，肯定正确，而response肯定不等于"0"，因为outprintln("0")，println这个方法就是在输出的字符串后加一个回车，你可以将response转换为ascii码看看是不是这样。
ajax是客户端获取服务器上数据的方法
EL表达式利用的是服务器上的数据
显然，EL表达式是不可能获取ajax请求得到的数据的
千万要谨记：JSP也是servlet，它是不可能直接跟JS产生交互的，自然也无法利用JS取到的数据
0条评论