第一种(原生态写法):
var xmlhttp;
//首先创建一个XMLHttpRequest对象的方法
function createXMLHttpRequest(){
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
function checkemail(){
createXMLHttpRequest();//创建一个XMLHttpRequest对象
//将页面的数据发送给服务器
var emailvalue = document.getElementById("BS_U_Mail").value;
//发送给服务器,就需要知道服务器的处理路径
var url = "checkemail.do?useremail="+emailvalue;
//通过XMLHttpRequest发送数据
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange=handledata;
}
function handledata(){
if(xmlhttp.readyState==4){//表示服务器已经响应完客户端的请求,数据发回到客户端
if(xmlhttp.status==200){ //浏览器的状态
if(xmlhttp.responseText=="Y"){ //说明email数据是重复的
document.getElementById("sp1").innerHTML="<font color='red'>*该邮箱已经占用</font>";
document.getElementById("btnsub").setAttribute("disabled","disabled");
}else{
document.getElementById("sp1").innerHTML="";
document.getElementById("btnsub").removeAttribute("disabled");
}
}
}
}
后台接收:
req.setCharacterEncoding("utf-8");
String useremail = req.getParameter("useremail");
//把数据响应给客户端
resp.setCharacterEncoding("gbk");
PrintWriter pw = resp.getWriter();
try {
if(userInfoService.ifrepeat(useremail)){
pw.write("Y");
}else{
pw.write("N");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
方式2:
//登录名是否存在
function checkemail(){
var emailvalue=$("input[name='useremail']").val();
$.ajax({
type:"GET",
url:"checkemail.do",
data:"useremail="+emailvalue,
success:function(data){
if(data=="Y"){
$("#sp1").html("*用户可用").css("color","green");
}else{
$("#sp1").html("*用户不存在").css("color","red");
}
}
});
}
在后台接收:
req.setCharacterEncoding("utf-8");
String useremail = req.getParameter("useremail");
//把数据响应给客户端
resp.setCharacterEncoding("gbk");
PrintWriter pw = resp.getWriter();
try {
if(userInfoService.ifrepeat(useremail)){
pw.write("Y");
}else{
pw.write("N");
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
方式3:
$(function(){
//点击搜索按钮的时候,数据的搜索功能
$("input[name='submit1']").click(function(){
var searchKey=$("#searchKey").val().trim();
var searchMethod=$("#searchMethod").val();
//考虑采用ajax的方式来处理获取的数据
$.ajax({
type:"GET",
url:"searchajsx.do",
data:"searchKey="+searchKey+"&searchMethod="+searchMethod+"",
dataType:"json",//返回的数据类型为json的对象,也就是将字符串转换为对象
success:function(data){//ajax请求数据成功之后,那么它的处理函数
$("#showbook tbody").find("tr:not(:first)").remove();
var count=0;
for(var i in data){
count++;
var booktitle =data[i].booktitle;
var bookauthor =data[i].bookauthor;
var bookprice= data[i].bookprice;
var bookid= data[i].bookid;
var str="<tr><td style=\"width: 60%\">"+
"<a href=\"showbook.do?bookid="+bookid+"\" "+
" target=\"_blank\" title=\"+booktitle+\">"+booktitle+"</a></td> "+
" <td style=\"width: 20%\">"+bookauthor+"</td> "+
" <td style=\"width: 20%\">"+bookprice.toFixed(2)+"</td></tr> ";
$("#showbook tbody").append(str);
}
$("#labRed").html(count);
}
})
})
})
后台接收:
req.setCharacterEncoding("utf-8");
String seracheKey =req.getParameter("searchKey");
String searchMethod =req.getParameter("searchMethod");
Book b=new Book();
if(searchMethod.equals("Title")){
b.setBooktitle(seracheKey);
}else if(searchMethod.equals("Author")){
b.setBookauthor(seracheKey);
}else{
b.setBookisbn(seracheKey);
}
try {
List<Book> listbook =bookService.getbooks(b);
//集合数据,集合数据需要转换成json的字符串
JSONArray json = JSONArray.fromObject(listbook);
//如果转换的是一个实体数据,而不是集合数据
//JSONObject jsonobject = JSONObject.fromObject(实体对象);
String strjson =json.toString();//转换成json的字符串
resp.setCharacterEncoding("utf-8");
PrintWriter pw = resp.getWriter();
pw.write(strjson);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();//打印错误的堆栈信息
}
如果转换的是实体对象:
JSONObject jsonobject = JSONObject.fromObject(实体对象)
如果转换的是集合:
JSONArray json = JSONArray.fromObject(集合);
方式4(表单序列化)layui前端框架中
function saveit(){
//采用ajax的方式向后台发送数据
//表单序列化的格式数据类似于与url传参的时候的格式
var senddata = $("form").serialize();
$.ajax({ //采取ajax的方式发送
type:"POST",
url:"updategoodsinfo.do",
data:senddata,
success:function(data){
if(data=="Y"){ //关闭当前的弹出层
closeit();
}else{
layer.msg("更新商品信息失败!");
}
},
dataType:"text" //表示返回的数据类型
}
);
}
//关闭弹出层的方法
function closeit(){
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index);
}
后台接收:
@RequestMapping(value="/updategoodsinfo.do",method=RequestMethod.POST)
public void updategoodsinfo(Goodsinfo goodsinfo,HttpServletResponse resp){
goodsinfo.setUpdateuser("张三");
goodsinfo.setUpdatetime(GetReceiptsIdUtil.getcurrenttime());
try {
PrintWriter pw = resp.getWriter();
if(goodsinfoService.updategoodsinfo(goodsinfo)>0){
pw.write("Y");
}else{
pw.write("N");
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
暂时想到这么多,后续补充。