ajax的两种提交方式(get/post)和两种版本
发布时间:2020-12-16 00:49:28 所属栏目:百科 来源:网络整理
导读:本篇也用encodeURI对字符串做了加密,并在类里做了解码,其中需要一些注意的地方在源码里做了注释。get/post两种提交方式,但get提交容易乱码,一定多加注意 最近比较闲,就把以前用过的技术串一下做个手札,方便以后自己偷懒,小鸟你们幸福了。 首先主要是
本篇也用encodeURI对字符串做了加密,并在类里做了解码,其中需要一些注意的地方在源码里做了注释。get/post两种提交方式,但get提交容易乱码,一定多加注意
最近比较闲,就把以前用过的技术串一下做个手札,方便以后自己偷懒,小鸟你们幸福了。
首先主要是将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确定" onclick="test();"/> <input type="button" name="button" value="post确定" onclick="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,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 type="text/javascript"> //方式① function circum(lon,lat){ $.ajax({ url: "JQAjaxServlet?method=jsons",contentType: "application/x-www-form-urlencoded; charset=utf-8",type : 'post',dataType:"json",async: false,data : { //传参给后台 'lon' : lon,'lat' : lat },success: function (data) { // 接后台返回result 在这里data为后台返回数据,你可以尽情处理了 } }); } </script>
后台:servlet/action里 类里对数据处理的方法同上,就不再累赘了
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
- [Swift]LeetCode347. 前K个高频元素 | Top K Fre
- postgresql角色和权限相关---转载
- swift – 如何使用detailCalloutAccessoryView更
- AJAX 学习笔记[三] get 与post 模式的区别
- c – 将char数组转换为unsigned char *
- ruby-on-rails – 如何将rails3路由转换为rails4
- c# – WebAPI 2.2 OData v4 [EnableQuery]应用在
- 自己总结的一些flex 面试题
- c# – Properties.Settings将不会被保存
- ruby – 当你的类没有定义#each时,返回Enumerato
热点阅读