jQuery对ajax的支持

来源：互联网发布：看程序员直播编辑：程序博客网时间：2024/06/05 12:00

jQuery对ajax的支持

(1)$.ajax方法

用法: $.ajax({});

(2)load方法

向服务器发送异步请求，然后将服务器返回的数据直接添加到符合要求的节点之上。

代码如下：

采用方法（一）：随机生成股票列表

实体类：

package bean;public class Stock {private String code;private String name;private int price;public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getPrice() {return price;}public void setPrice(int price) {this.price = price;}}

的服务端代码：

package web;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import java.util.Random;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import bean.Stock;import net.sf.json.JSONArray;public class ActionServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");//post请求时候解决中文乱码//分析请求资源路径//例如http://ip:port/ajax-day01/check.do (端口号后面的字符串为该路径)String uri= request.getRequestURI();String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();//获得输出流if("/quoto".equals(action)){//模拟生成几只股票的信息List<Stock> list = new ArrayList<Stock>();Random rand = new Random();for(int i=0;i<8;i++){Stock s = new Stock();s.setCode("60087" + rand.nextInt(10));s.setName("中国嘉陵" + rand.nextInt(10));s.setPrice(10 + rand.nextInt(1000));list.add(s);}//fromObject()方法可以传入集合或者传入数组JSONArray jsonArr = JSONArray.fromObject(list);String jsonStr = jsonArr.toString();System.out.println(jsonStr);out.println(jsonStr);}else if("/luck".equals(action)){Random rand = new Random();int number = rand.nextInt(8888);out.println(number);//返回text文本}out.close();}}

jsp：

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Insert title here</title><style type="text/css">  #d1{    width:450px;    height:350px;    background-color:black;    margin-left:300px;    margin-top:20px;     text-align:center;  }  #d2{    background-color:red;    color:yellow;  }  table{    color:white;    font-style:italic;    font-size:24px;  }</style><script type="text/javascript" src="js/jquery-1.11.1.js"></script><script type="text/javascript">  $(function(){  //页面加载完成后会执行下面的代码(调用function方法)  setInterval(quoto, 2000);  });  /*  该函数通过调用ajax对象(XMLHttpRequest),向服务器发送异步请求  服务器返回一个描述股票信息的JSON字符串  通过解析JSON字符串获得股票信息,然后更新表格  */  function quoto(){  /*  $.ajax({})方法里面传入一个参数,{}是一个用来描述请求参数的对象  常见的选项参数有如下几个：  url:请求地址  data:请求参数(有两种格式)  第一种格式:请求字符串,例如"adminCode=Sally"  第二种格式:请求对象,例如{"adminCode":"Sally"}  type:请求类型(get/post)  dataType:服务器返回的数据的类型(常见有以下几种)  text:文本数据  json:json字符串  html:html文档  xml:xml文档  javascript:javascript脚本  success:事件处理函数(当服务器处理正常，用来处理服务器返回的数据)  error:事件处理函数 (当服务器处理异常，用来处理服务器返回的数据)  */  //利用jQuery提供的方法来发送异步请求  $.ajax({  "url":"quoto.do",  //此处没有请求参数  "type":"post",  "dataType":"json",  ///此处会将json字符串转换为js对象,若次数返回text文本,则不会自动转换为js对象,需要自己调用parse()方法转换  "success":function(stocks){  //此处stocks为数组  //清空之前tbody中的数据  $("#tb1").empty();//html("")也可以  for(var i=0;i<stocks.length;i++){//此处length为属性,不是方法  var s = stocks[i];   //某一只股票  //更新表格  $("#tb1").append("<tr><td>" + s.code +"</td><td>" + s.name +"</td><td>" + s.price +"</td></tr>"  );  }  }  });  }</script></head><body style="font-size:30px;">  <div id="d1">    <div id="d2">股票行情</div>    <div id="d3">      <table width="100%">        <thead>          <tr>            <td>代码</td>            <td>名称</td>            <td>价格</td>          </tr>        </thead>        <tbody id="tb1">        </tbody>      </table>    </div>  </div></body></html>

测试结果：

采用方法（二）：随机生成幸运数字

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>  <style type="text/css">    p{      color:blue;      text-align:center;    }  </style>  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>  <script type="text/javascript">  $(function(){  $("#a1").click(showNumber);  });  function showNumber(){  $("#result").load("luck.do");  }      </script></head><body>  <p><a href="#javascript:" id="a1">你的幸运数字是:</a></p>  <p id="result"></p></body></html>

测试结果：

阅读全文

0 0