Ajax篇--02 Ajax编码问题及Json的使用

最新推荐文章于 2023-11-21 20:48:18 发布

mind_programmonkey

最新推荐文章于 2023-11-21 20:48:18 发布

阅读量400

点赞数

文章标签： ajax json jquery对ajax的支持

本文链接：https://blog.csdn.net/mind_programmonkey/article/details/80154303

版权

javaweb的学习路径同时被 2 个专栏收录

84 篇文章 1 订阅

订阅专栏

javaweb封神之路

54 篇文章 7 订阅

订阅专栏

Ajax篇--02 Ajax编码问题及Json的使用

一、Ajax编码问题

1.如果是get请求

ie游览器会使用gbk进行编码，而其他游览器会使用utf-8来编码。服务器端默认使用iso-8859-1来解码，所以会产生乱码。

解决方法：

step1：让服务器端统一使用utf-8解码

URIEncoding="utf-8"

step2：游览器使用encodeURI函数来编码。

2.如果是post请求

游览器都会使用utf-8来编码，服务器端默认使用iso-8859-1来解码，所以会产生乱码。

req.setCharacterEncoding("utf-8");

二、JSON（JavaScript object notation）

1.JSON是什么？

是一种轻量级的数据交换格式。

注：

数据交换：将要交换的数据先转换成一种与平台无关的数据格式，然后交给接收方来处理。

轻量级：相对于xml，JSON文档更小，解析的速度更快。

2.语法

（1）表示一个对象

{属性名:属性值,属性名:属性值...}

注：

a.属性名必须使用双引号括起来

b.属性值的类型可以使string，number，true/false,null,object

c.属性值如果是string，必须使用双引号括起来。

（2）表示一个由对象组成的数组

[{},{},{}...]

3.使用JSON

（1）将java对象转换成json字符串

可以使用json官方的工具（json-lib）。JSONObject、JSONArray

（2）使用json官方工具json-lib

JavaScript内置对象JSON提供的parse()方法

<html>
	<head>
		<meta content="html;charset=utf-8">
		<script type="text/javascript">
			//使用json语法表示一个对象	
			function f1(){
				var obj={"code":"10000","name":"中国电信"};
				alert(obj.code);
			}
			function f2(){
				var obj={"name":"Mars","address":{"city":"北京","street":"长安街","room":1008}};
				alert(obj.address.street);
			}
			//使用JSON语法表示对象组成的数组
			function f3(){
				var arr=[{"code":"10000","name":"中国电信"},{"code":"10086","name":"中国移动"}];
				alert(arr[1].code);
			}
			/*
			将json字符串转换成JavaScript对象
			*/
			function f4(){
				var str='{"name":"Tom","age":"18"}';
				//使用JavaScript内置的json对象提供的方法来转换
				var obj=JSON.parse(str);
				alert(obj.name);
			}
			function f5(){
				var str='[{"name":"Tom","age":"18"},{"name":"Eric","age":"20"}]';
				//使用JavaScript内置的json对象提供的方法来转换
				var arr=JSON.parse(str);
				alert(arr[1].name);
			}
		</script>
	</head>
	<body style="font-size: 30px;">
		<a href="javascript:f1();">Click me</a><br>
		<a href="javascript:f2();">Click me</a><br>		
		<a href="javascript:f3();">Click me</a><br>		
		<a href="javascript:f4();">Click me</a><br>		
		<a href="javascript:f5();">Click me</a><br>		
	</body>
</html>

三、JQuery对ajax的支持

用法：

（1）$.ajax({})方法

说明：{}是一个用来描述请求选项参数的对象。常见的选项参数有如下几个：

url:请求地址

data:请求参数，有两种格式

第一种格式:请求字符串，比如“adminCode=Sally”.

第二种格式:对象,比如{“adminCode”:“Sally”}

type:请求类型

dataType:服务器返回的数据的类型

text:文本数据

json:json字符串

html:html文档

xml:xml文档

script：JavaScript脚本

success:事件处理函数（当服务器处理正常，用来处理服务器返回的数据）

error:事件处理函数（当服务器处理异常，用来处理服务器返回的数据）

（2）load()方法

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

用法：$obj.load();

实例、使用json数据交换，同时ajax更新股票行情例子和幸运数字的例子

（1）bean包下的Stock.java

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;
	}
	@Override
	public String toString() {
		return "Stock [code=" + code + ", name=" + name + ", price=" + price + "]";
	}
	
}

web.servlet

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{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		System.out.println("service()");
		req.setCharacterEncoding("utf-8");
		//获得请求资源路径http://ip.port/ajax_day01/check.do
		String uri = req.getRequestURI();
		System.out.println("uri:"+uri);
		//分析请求资源路径
		String action=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
		System.out.println("action:"+action);
		res.setContentType("text/html;charset=utf-8");
		PrintWriter out = res.getWriter();
		//依据分析的结果，进行不同的处理
		if("/quoto".equals(action)) {
			//模拟生成几只股票的信息
			List<Stock> stocks=new ArrayList<Stock>();
			Random random=new Random();
			for(int i=0;i<8;i++) {
				Stock stock = new Stock();
				stock.setCode("60087"+i);
				stock.setName("china"+i);
				stock.setPrice(random.nextInt(1000));
				stocks.add(stock);
			}
			JSONArray jsonArray = JSONArray.fromObject(stocks);
			String jString = jsonArray.toString();
			System.out.println(jString);
			out.println(jString);
		}else if("/getLucky".equals(action)) {
			Random random=new Random();
			int number = random.nextInt(8888);
			System.out.println("number:"+number);
			out.println(number);
		}
	}
}

stock.jsp

<%@ page language="java" 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>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(function() {
		//页面加载完成，会执行这儿的代码
		setInterval(quoto,5000);
	});
	/*
	该函数通过调用ajax对象（XMLHttpRequest）向服务器发送异步请求，
	服务器返回一个描述股票信息的json字符串。通过解析json字符串，获得股票信息r
	然后更新表格。
	*/
	function quoto(){
		//利用jquery提供的方法来向服务器发送异步请求
		$.ajax({
			"url":"quoto.do",
			"type":"post",
			"dataType":"json",
			"success":function(stocks){
				//$ajax方法会自动将json字符串转换成JavaScript对象
				//追加之前先清空tbody
				$('#tb1').empty();
				for(i=0;i<stocks.length;i++){
					var s=stocks[i];
					//更新表格
					$('#tb1').append('<tr><td>'+s.code+'</td><td>'+s.name+'</td><td>'+s.price+'</td></tr>');
				}
			}	
		});
	}
</script>
<style type="text/css">
	#d1{
		width: 450px;
		height: 350px;
		background-color: black;
		margin-left: 300px;
		margin-top: 20px;
	}
	#d2{
		height: 32px;
		background-color: red;
		color: yellow;
	}
	#d3{
		color: white;
		font-size: italic;
		font-size: 24px;
	}
</style>
</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>

lucky.jsp

<%@ page language="java" 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">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(function(){
		$('#a1').click(showNumber);
	});
	function showNumber() {
		$('#d1').load('getLucky.do');
	}
</script>
<title>幸运数字</title>
</head>
<body style="font-size: 30px;">
	<a id="a1" href="javascript:;">你的幸运数字是:</a><br>
	<div id="d1"></div>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <display-name>ajax_day02</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
  	<servlet-name>action</servlet-name>
  	<servlet-class>web.ActionServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>action</servlet-name>
  	<url-pattern>*.do</url-pattern>
  </servlet-mapping>
</web-app>

mind_programmonkey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax篇--02 Ajax编码问题及Json的使用

Ajax篇--02 Ajax编码问题及Json的使用一、Ajax编码问题1.如果是get请求ie游览器会使用gbk进行编码，而其他游览器会使用utf-8来编码。服务器端默认使用iso-8859-1来解码，所以会产生乱码。解决方法：step1：让服务器端统一使用utf-8解码URIEncoding="utf-8" step2：游览器使用encodeURI函数来编码。2.如果是post请求游览器都会使...
复制链接

扫一扫