ajax和servlet交互

文章转自

JDBC实现对数据库的增删改查。DBConnection打开数据库连接、PreparedStatement参数预处理、ResultSet结果集接收…
这部分不详述。
前后台交互一般通过json来进行数据传输,json是一种轻量级的数据交换格式,一般都是{key:value} 形式,可以使用Map接收。
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
一般来说AJAX都会引入jQuery包,可以使用本地引用或在线引用,这样会减少想当程度的代码量。以下是百度的jquery在线库

1
总是记不熟AJAX的基本结构,所以记录一下

AJAX前台

$.ajax({//发起ajax请求
		type : "get",//"post"
		url : url;
		data : {"para" : para },
		cache : false,//true
		async : true,//false
		dataType : "JSON",
		success : function (data)
		{
			//success code
		},
		error : function(XMLHttpReques , textStatus, errorThrown){
			//error code
			//alert(errorThrown);
		}
});

其中type是选择Servlet中执行doGet()方法还是doPost()方法
GET方法:查询字符串(key/value)是在请求的 URL 中发送的,URL会显示消息内容
POST方法:查询字符串(key/value)是在请求的 HTTP 消息主体中发送的,相对安全,提交内容不会在URL中显示

url是访问的Servlet的名称
Servlet运行后的路径是 localhost:端口号 / 项目名 / Servlet名称
页面路径是 localhost:端口号 / 项目名 / (网页文件夹/) html或jsp页面名称
若页面是在文件夹下需要返回上一级使用…/访问Servlet
./表示当前目录 …/表示上一级目录 /表示根目录

data是从前台到后台传输的数据参数,可以传输多个数据参数
传输到后台使用 request.getParameter(“para”); 方法接收参数

async是异步传输模式
async是asynchronous的缩写,true是异步传输,false指同步传输
同步传输方式中发送方和接收方的时钟是统一的、字符与字符间的传输是同步无间隔的,同步传输是面向比特的传输。异步传输方式并不要求发送方和接收方的时钟完全一样,字符与字符间的传输是异步的,是面向字符的传输。

cache是对缓存的操作
当访问页面时浏览器会产生缓存,该参数控制是否在缓存中读取数据的读取。
true 如果当前请求有缓存的话,直接使用缓存。如果该属性设置为 false,则每次都会向服务器请求。
cache属性是true(默认值)时:在第一次请求完成之后,如果地址和参数不变化,第二次去请求,会默认获取缓存中的数据,不去读取服务器端的最新数据。
cache属性是flase(默认值)时:每次读取的是最新的数据。

注:ajax缓存只对GET方式的请求有效,因为浏览器认为POST请求提交的内容必定有变化,所以不走缓存。

dataType是数据类型
有以下几种参数,是指后台返回给前台的数据类型(也与success之后的事件相关):
“xml”: 返回 XML 文档,可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。
“json”: 返回 JSON 数据 。
“jsonp”: JSONP 格式。
“text”: 返回纯文本字符串
success是请求成功后执行的函数
由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。
error是请求失败后执行的函数
有以下三个参数:XMLHttpRequest 对象、textStatus错误信息、errorThrown(可选)捕获的异常对象。
如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。

Servlet后台

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
			requset.setCharacterEncoding("utf-8");//设置编码格式
			response.setContentType("application/json; charset=utf-8");
			String sqlString="select * from User ";
			List<Map<String,String>> list= mysqlUtil.show(sqlString,MysqlUtils.USER});
			String json="{\"data\":[";
			if(list.size()!=0)
			{
				json+="{\"code\":\"200\"},";//查询有结果代码200
				for(Map<String,String> map:list){
					String userName=map.get("userName");
					
					json+="{\"userName\":\""+userName+"\"";
					json+="},";
				}
			}
			else{
				json+="{\"code\":\"300\"},";//无结果代码300
			}
			json=json.substring(0,json.length()-1);
			json+="]}";
			response.getWriter().write(json);
}

注意!!设置编码格式
request.setCharacterEncoding(“utf-8”)是设置从request中取得的值,即前台向后台传值设置的数据格式
response.setContentType(“text/html;charset=utf-8”)是设置页面中为中文编码。
response.setCharacterEncoding(“utf-8”)设置HTTP 响应的编码,数据库抽出数据向前台传输的数据格式
json字符串拼接
注意{ [] } , ; 这些细节,一般打印一下去Bejson检查一下,调一下错就ok了。
response.getWriter().write(" ");
该方法是将后台的json值传输到前台

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值