Ajax结合json在web中的应用

最新推荐文章于 2022-07-30 16:35:57 发布

wickedvalley

最新推荐文章于 2022-07-30 16:35:57 发布

阅读量749

点赞数

CC 4.0 BY-SA版权

分类专栏：杂类文章标签： ajax json web 前端应用

本文链接：https://blog.youkuaiyun.com/wickedvalley/article/details/51519429

杂类专栏收录该内容

72 篇文章

订阅专栏

本文展示了一个使用Ajax实现客户端与服务器端通过JSON格式数据进行交互的示例。该示例利用jQuery发起Ajax请求，并从服务器接收JSON数据，然后解析并显示这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.web前端页面

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="jquery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="json/json2.js"></script>
<title>测试Ajax</title>
<script type="text/javascript">
$(document).ready(
function(){
$('#bt1').click(function(){
$.ajax({
dataType:"json",
type: "GET",
url: "AjaxAction",
data: "username=kaxifa&&password=123456",

success: function(data){

var jsonArr=eval(data); //比较重要的函数，用来解析服务器传来的对象
var dataArray="";

for(var i=0;i<jsonArr.length-1;i++){
dataArray+=jsonArr[i].username+",";
dataArray+=jsonArr[i].password+",";
dataArray+=jsonArr[i].date;
}

$('#resText').html(dataArray);
}
});

});

});

</script>
</head>
<body>

<button id="bt1">发送</button>
<p id="resText">
从前从前，我很爱你！2016
</p>

</body>

</html>

1.服务器端：

package test10;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Date;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class AjaxAction extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

User user = new User();
user.setUsername("小强");
user.setPassword("66666");

Long time=System.currentTimeMillis();
String d=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss").format(new Date(time));
user.setDate(d);

List list = new ArrayList();
//不指定泛型的话，可以携带多种数据类型
list.add(user);
list.add("1025");

String username=request.getParameter("username");
String password=request.getParameter("password");
System.out.println("username="+username);
System.out.println("password="+password);

JSONArray array=JSONArray.fromObject(list);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.write(array.toString());//把对象写回给浏览器

out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request, response);
}

}