jQuery对ajax的支持

最新推荐文章于 2021-08-06 16:58:31 发布

荒--

最新推荐文章于 2021-08-06 16:58:31 发布

阅读量400

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/wangqing84411433/article/details/74151404

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery对ajax的支持

(1)$.ajax方法

用法: $.ajax({});

(2)load方法

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

注意：这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的

代码如下：

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

实体类：

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 {

	@Override
	protected 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(){
        //注意IE缓存问题
	//$("#num").load("luck.do",{"name":"Sally"}); 此处是POST请求
        $("#result").load("luck.do?r=" + new Date().getTime());
  	}
    
  </script>
</head>
<body>
  <p><a href="#javascript:" id="a1">你的幸运数字是:</a></p>
  <p id="result"></p>
</body>
</html>

测试结果：

荒--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery对ajax的支持

jQuery对ajax的支持(1)$.ajax方法用法: $.ajax({}); (2)load方法向服务器发送异步请求，然后将服务器返回的数据直接添加到符合要求的节点之上。注意：这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的代码如下：采用方法（一）：随机生成股票列表实体类： package be...
复制链接

扫一扫