jQuery $.ajax() $.get() $.post() $.getJSON()

最新推荐文章于 2024-08-09 17:26:52 发布

高国藩

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量6.2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u014201191/article/details/43197199

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

(1) json.jsp

<body style="text-align: left;">
<script language="JavaScript" src="jQuery/jquery-1.8.0.min.js"></script>
<script language="JavaScript" src="jQuery/jquery-1.8.0.js"></script>
<h1>jQuery_Ajax test</h1>
<br>
<input type="button" value="Ajax_Servlet_Json" οnclick="getjson()">
<br />
<br />
<input type="button" value="Ajax请求文本" οnclick="getjson1()">
<br />
<br />
<input type="button" value="Ajax_Method_get" οnclick="getjson3()">
<br />
<br />
<input type="button" value="Ajax_getJSON" οnclick="getjson2()">
<br />
<br />
<script type="text/javascript">  
function getjson() {  
$.ajax( {  
 type : "get",  
   url : "/jQuery_Ajax/jQueryServlet",  
   dataType:"json",  
   success : function(msg) {  
      alert("Data Saved: " + msg.name+"--"+msg.staffName);  
      }  
  });  
} 
function getjson1() {  
 $.ajax( {  
  type : "get",  
    url : "tree_data1.json",  
    dataType:"json",  
   success : function(msg) {  
  alert(msg[0].text);  
   }  
  });  
} 
function getjson2(){
 $.getJSON(
 "/jQuery_Ajax/JqueryGetPostServlet01",
   {id:     '1',
 name:   '青藤园',},
   function (date){
   alert(date.hello);
    }
  );
}

function getjson3(){
 $.get( 
"/jQuery_Ajax/jQueryServlet",{
 id:     '123',
    name:   '青藤园',
 },function(data,state){
   //这里显示从服务器返回的数据
    alert(data);
  //这里显示返回的状态
   //alert(state);
 }
);
}

</script>
</body>

(2) 两个servlet

package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import com.bean.Shop;

public class JqueryServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
		throws ServletException, IOException {
	Shop shop = getJSON();
	resp.getWriter().print(JSONObject.fromObject(shop));
}
public Shop getJSON(){
	System.out.println("***************");
	Shop shop = new Shop();  
    System.out.println("Shop");  
    shop.setName("Eric");  
    shop.setStaffName(new String[]{"mkyong1", "mkyong2"}); 
    return shop;
}
}</span>

package com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import com.bean.Shop;


public class JqueryGetPostServlet01 extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
		throws ServletException, IOException {
	System.out.println("***************");
	String id = req.getParameter("id");
	String name = req.getParameter("name");
	if(name!=null){
		name = new String(name.getBytes("iso-8859-1"), "utf-8");
		System.out.println(name);
	}
	System.out.println(id+"   "+name);
	resp.getWriter().print(JSONObject.fromObject("{'hello':'hello'}"));
}
}

(3)一个bean

package com.bean;
public class Shop {
	String name;
	String staffName[];
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String[] getStaffName() {
		return staffName;
	}
	public void setStaffName(String[] staffName) {
		this.staffName = staffName;
	}
	public Shop() {
	} 
}

(4)webroot下的tree_data1.json

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"name":"test",
		"text":"welcome.html"
	}]
}]

注意事项:

***这四个jQuery方法除了Ajax方法需要些url,date,dateType这些关键字外,别的三个方法是不需要写的,否则不会相应请求***