Ajax

一种在网页上调用后台接口的方式
jquery提供了相应的用法 即 $.ajax({内容});先添加jQuery包。
内容部分为 JS对象。

$.ajax({
type:'get',  				 //请求类型，get->调用doget()，post-> 调用dopost();
data:req,     //发送的数据为req            ;
url:'queryAll',		   //接口地址，项目的相对地址			
datatype:'json',					//返回数据的格式类型
success :function(resp){				//回调函数，当服务器返回数据时，调用。				
console.log(resp);
}
});

显示返回的数据
当Ajax提交完数据且后端处理完成后，success的回调方法被调用，此时，可以前端页面应处理显示返回的数据**（为什么成为局部刷新技术的原因）**
可将Ajax封装在 点击时间中，当按钮被点击时，Ajax对象被调用

示例1:查询所有学生数据

1. 前端代码
   
2. JS代码

function query()
{
$.ajax({
type:'GET',                   //请求类型，get->调用doget()，post-> 调用dopost();
url:'queryall',			   //接口地址，项目的相对地址			
datatype:'json',					//返回数据的格式类型
success :function(resp){				//回调函数，当函数返回应答时，调用。				
console.log(resp);
showresult(result);
}
});}
);        //表格体的标签，标签选择器
showresult(result)
{
var target =$(".main .content tbody");
For(var rows of result){		//循环遍历返回的每一个对象。
var str="<tr>"						//表行的拼接。
+"<td>" +rows.id+"</td>"
+"<td>"+rows.name+"</td>"
+"</tr>";
target.append(str);          //插入后 在页面编译显示为html内容 即为表格的一行。
} //通过这个方法可以将 每个对象显示在业面

示例2：查找部分学生数据

1. HTML代码
   选择查找显示：添加文本行 输入学号的开始和结束
   
2. JS代码
   获得class为from 和to 的标签，获取他们的值value,再去掉空格
   
   
   在ajax 中加入data 选项，选择后端接口url，
   ajax()会自动的把 data 里的数据构造成 ?from=xxx&to=yyy 的形式附加在 URL后面

中文传参

当我们需要把一个中文参数传递到后台，中文是不能直接放在 URL 里
http://xx.x.x/QueryById?filter=张
这是浏览器会把中文字符转成百分号形式的编码

中文与对应编码的转换：
String  s = "张";
String query  = URLEncoder.encode(s); 
// --> %E5%BC%A0

String query = "%E5%BC%A0";
String s = URLDecoder.decode(s);   
// --> “张”

表单标签

<form method="post" action="addStudent">
<input  type="text" name="id">...
<input type="submit" value="提交">
</form>

对应后台的servlet:
doPost() --> method=”post”;
addStudent–> action=”addStudent”;
Request.getParameter(“***” ) -->name=”***”;

抓包数据

Post方式的表单数据放在http的正文部分来提交数据

Post与Get

Http Post的特点：
1 第一行为Post
2 数据放在Http正文部分的提交数据
3 中文仍然使用URL编码
Http Get的特点：
1 第一行为Get
2 数据放在访问路径？后面 ,以&分隔
3 中文仍然使用URL编码

Restful

前端使用json方式传递数据给后端，后端使用json方式将数据传给前端；

示例

1. 前端JS代码

<script>
Function  AddStudent()
{
var req = {	};
req.id = $('.main .content .id').val().trim();
req.name = $('.main .content .name').val().trim();
req.phone == $('.main .content .name').val().trim();

var json  =JSON.stringify(req);

$.ajax({
 	type :"post"，
url:"addStudent",
dataType:"json",
data:"json",
success:function(resp){}
});
}
</script>

2. 后端部分代码
   将前端传来的json数据转化为字符串，在转化为jsonobject来读取

---doPost---
String  reqText = ReadAsText(request.getInputStream(),”utf-8”);
JSONObject obj = new JSONObject(reqText);
int id = obj.getInt(“id”);
String name = obj.getString(“name”);
String phone = obj.getString(“phone”);
-----------------------------------
public String ReadAsText( InputStream inputStream ,String charset)
{
ByteArrayOutputStream out = new ByteArrayOutputStream[1024*16];
Byte[] data = new byte[1024];
While(true)
{
int n = inputStream.read(data);
if(n<0)break;
if(n==0)continue;
out.write(data,0,n);
}
String str = out.toString(charset);
out.close();
return str;
}

Restful附带URL参数

1. 前端JS

<script>
function  addStudent()
{
var req = {	};
req.id = $('.main .content .id').val().trim();
req.name = $('.main .content .name').val().trim();
req.phone == $('.main .content .name').val().trim();

var json  =JSON.stringify(req);

$.ajax({
type :"post",
url:"addStudent?root=admin&password=123",
dataType:"json",
data:"req",
success:function(resp){}
});
}
</script>

2. 后端

//----------Servlet doPost方法------
HashMap<String ,String> map = queryString(request.getQueryString());
//----------------------
Public HashMap<String ,String> queryString(String queryString){
HashMap<String,String> map = new HashMap<String,String>();
String[] ppp= queryString.split(“&”);
While(String p :ppp)
{
String[] kv = p.split(“=”);
String key = kv[0];
String value = kv[1];
Map.put(key,value);
}
}

Ajax与form标签

为什么前端用ajax而很少用form标签提交请求呢？

• 交互方式：

1. form使用的同步方式，即点击提交按钮后，数据就提交到后端接口了，前端是没有办法接收后端返回的数据的。
2. ajax使用的异步方式，即点击提交按钮后，数据提交到后端接口后，后端返回数据后，前端的success异步调用方法可以接受后端返回的数据，然后可以使用JS刷新一些地方的数据。（例如未登录–>已登录）；

• 数据处理格式
  使用form标签提交数据时，很难转化为JSON格式的数据；
  使用Ajax方式提交数据时，只需要在JS函数里转化好数据格式即可。

原文链接:https://blog.csdn.net/yaoyaochengxian/article/details/117160229