Ajax在JQuery中的运用（Post方法）

发布时间：2020-12-16 03:36:27 所属栏目：百科来源：网络整理

导读：1.$.Post() index4.html !DOCTYPE htmlhtmlheadmeta charset="UTF-8"titletest get()/titlescript type="text/javascript" src="script/jquery-3.1.1.js"/scriptscript type="text/javascript" $(function() { $("input:eq(0)").click(function(){ $.getScri

1.$.Post()

index4.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test get()</title>
<script type="text/javascript" src="script/jquery-3.1.1.js"></script>
<script type="text/javascript">
  $(function() {
    $("input:eq(0)").click(function(){
        $.getScript("script/MyJs.js",function(){
           f();    
        });
    });
    
    //可以加载本地的JSON文件，也可以加载网络的JSON文件
    $("input:eq(1)").click(function(){
        $.getJSON("script/MyJson.json",function(data){
           var name=data.name;
           var age=data.age;
           $("<p>用户名："+name+",年龄："+age+"</p>").appendTo($("#content"));
        });
    });
    
    $("input:eq(2)").click(function(){
        //链接某个处理json的servlet
        $.getJSON("http://localhost:8082/Ajaxone/GetJSONServlet",function(data){
            var students=data.students;
            var res="<ul>n";
            for(var i=0;i<students.length;i++)
            {
                var student=students[i];
                res+="<li>"+student.name+"--"+student.password+"</li>n";
            }
            res+="</ul>";
            //标签生成节点对象
            $(res).appendTo($("#content")); 
        });
    });
});
</script>
</head>
<body>
  <input type="button" value="getScript"/><br/>
  <input type="button" value="getJSON"/><br/>
  <input type="button" value="getWebJSON"/><br/>
  <div id="content"></div>
</body>
</html>

MyJson.json

{"name":"Haige","age":"30"}

截图：

2.$.ajax()

index5.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test get()</title>
<script type="text/javascript" src="script/jquery-3.1.1.js"></script>
<script type="text/javascript">
  $(function() {
        $("input:eq(0)").click(function(){
            $.ajax({
                url:"GetJSONServlet",//请求参数，路径
                type:"get",//请求类型
                dataType:"json",//请求参数
                success:function(data){//请求成功调用的函数
                    var students=data.students;
                    var res="<ul>n";
                    for(var i=0;i<students.length;i++)
                    {
                        var student=students[i];
                        res+="<li>"+student.name+"--"+student.password+"</li>n";
                    }
                    res+="</ul>";
                    //标签生成节点对象
                    $(res).appendTo($("#content"));
                },error:function(data){//请求失败调用的函数
                    alert("失败了！");
                },complete:function(XMLHttpRequest,textStatus){//成功失败都会调用的函数
                    alert(XMLHttpRequest.status);
                }
            });
        });

});
</script>
</head>
<body>
  <input type="button" value="$.ajax()"/><br/>
  <div id="content"></div>
</body>
</html>

GetJSONServlet.java

package com.login;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

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

@WebServlet("/GetJSONServlet")
public class GetJSONServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public GetJSONServlet() {
        super();
        // TODO Auto-generated constructor stub
    }
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
		// TODO Auto-generated method stub
		response.setContentType("application/json;charset=utf-8");//浏览器传回的是xml格式
		response.setCharacterEncoding("utf-8");
		PrintWriter out=response.getWriter();
		out.println("{"students":[{"name":"haige","password":"1234"},{"name":"lisi","password":"1452"},{"name":"zhangsan","password":"1478"}]}");
		out.close();
	}
	protected void doPost(HttpServletRequest request,IOException {
		// TODO Auto-generated method stub
		doGet(request,response);
	}

}

截图：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!