ajax的两种提交方式和两种版本

最新推荐文章于 2022-01-22 23:18:45 发布

zheng_xb

最新推荐文章于 2022-01-22 23:18:45 发布

阅读量714

点赞数

分类专栏： java 基础文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/zheng_xb/article/details/11573669

版权

java 基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近比较闲，就把以前用过的技术串一下做个手札，方便以后自己偷懒，小鸟你们幸福了。

首先主要是将javascript版本ajax做下注释：ajax异步刷新主要是将所需条件拼成字符串传入后台，处理之后，直接调用回调函数将所得数据返还给页面，并加以显示，因为还在本页面，所以不用刷新页面，懂了了吧，本篇也用encodeURI对字符串做了加密，并在类里做了解码，其中需要一些注意的地方在源码里做了注释。get/post两种提交方式，但get提交容易乱码，一定多加注意

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <script type="text/javascript" >
var xmlHttp;
function createxmlHttpRequest(){
  if(window.XMLHttpRequest){
   xmlHttp= new XMLHttpRequest();//IE7+,FireFox,Opera,Safari,Chrome
  }else{
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
    function test(){//get
    //获取参数
    //var unames=encodeURI(document.getElementById("username").value);//一次编码java用new String(name.getBytes("ISO8859-1"), "UTF-8"）解码
    var unames=encodeURI(encodeURI(document.getElementById("username").value));//两次编码才能用java.net.URLDecoder.decode(name,"utf-8");解码
    var pws=encodeURI(document.getElementById("password").value);
    createxmlHttpRequest();
    xmlHttp.onreadystatechange=readyState;
    //function(){
      //alert(xmlHttp.readyState+"=="+xmlHttp.status);//判断请求状态
    //}
    xmlHttp.open("get","AjaxServlet1?msg=gets&name="+unames+"&pwd="+pws+"&timeStamp="+new Date().getTime(),true); //get 方式提交中文会出现乱码，encodeURI()/encodeURIComponent()将中文转成16进制编码，把字符串作为URI进行编码
    xmlHttp.send(null);
    }
    function testp(){//post
    //获取参数
    var unames=document.getElementById("username").value;
    var pws=document.getElementById("password").value;
    createxmlHttpRequest();
    xmlHttp.onreadystatechange=readyState;
    xmlHttp.open("post","AjaxServlet1",true);
   xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var str="msg=posts&name="+unames+"&pwd="+pws+"&timeStamp="+new Date().getTime();
    xmlHttp.send(str);//send 可用于传参
    }

    function readyState(){
    if(xmlHttp.readyState==4){
      if(xmlHttp.status==200){
       var msg= xmlHttp.responseText;
       //alert(msg);
       document.getElementById("result").innerHTML=msg;
      }
    }
    }
</script>
    <title>js异步刷新</title>
</head>

<body>
    <center>
   <div id="response">
   </div>
    用户：<input type="text" name="uname" id="username"><br>
    密码：<input type="text" name="pw" id="password"><br>
    <input type="button" name="button" value="get确定" οnclick="test();"/>
   <input type="button" name="button" value="post确定" οnclick="testp();">
   <div id="result">
   </div>
  </center>
</body>

</html>

这里是servlet/action Java代码:

package com.cstp.javascript;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
public class AjaxServlet1 extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
  //设置编码，防止乱码
  response.setCharacterEncoding("utf-8");
  request.setCharacterEncoding("utf-8");
  //接收参数
  String msg=request.getParameter("msg");
  if(msg.equals("gets")){
//   String name=new String(request.getParameter("name").getBytes("ISO8859-1"), "UTF-8"); //一次编码，java里进行解码操作
   String name=java.net.URLDecoder.decode(request.getParameter("name"),"utf-8"); //decode解码页面必须两次编码，java里进行解码操作
   String pwd=request.getParameter("pwd");
   System.out.println(name+","+pwd);
   PrintWriter out = response.getWriter();
   out.println("ajax响应get，结果返回"+name+","+pwd);
  }else if(msg.equals("posts")){
   String name=new String(request.getParameter("name").getBytes("utf-8"), "UTF-8"); //一次编码，java里进行解码操作
   String pwd=request.getParameter("pwd");
   System.out.println(name+","+pwd);
   PrintWriter out = response.getWriter();
   out.println("ajax响应post，结果返回"+name+","+pwd);
  }

}

}

上面是javascript版ajax，下面将喜欢jquery版的也分享给JQ友们：

页面上：

</script>

后台：servlet/action里

类里对数据处理的方法同上，就不再累赘了

zheng_xb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax的两种提交方式和两种版本

最近比较闲，就把以前用过的技术串一下做个手札，方便以后自己偷懒，小鸟你们幸福了。首先主要是将javascript版本ajax做下注释：ajax异步刷新主要是将所需条件拼成字符串传入后台，处理之后，直接调用回调函数将所得数据返还给页面，并加以显示，因为还在本页面，所以不用刷新页面，懂了了吧，本篇也用encodeURI对字符串做了加密，并在类里做了解码，其中需要一些注意的地方在源码里做了注释。ge
复制链接

扫一扫