zoukankan      html  css  js  c++  java
  • AJAX提交方法(POST)Demon

      AJAX的POST提交方法,本质上来看和GET差不多,有些细小的区别,POST要提交数据时,需要setRequestHeader()方法来提交HTTP头,然后send()方法中提交数据(格式为:"?str=String&str2=String2");str和str2为变量名,String和String2为要发送的值。

      其他与Get差不多。

      下面是一个发送并接收username和password的Demon,先创建一个.html文件,名称随意,代码如下:

      <body>
      <script type="text/javascript" src="1.js"></script>
        用户名称:<input type="text" id="username" /><br />
       用户密码:<input type="password" id="password" /><br />
     <input type="button" onclick="fun();" value="提交"> <br/>
     <p id="txt"></p>
      </body>

      接着来创建1.js的Javascript文件,要和.html在同一目录下,代码如下:

    function fun(){
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            alert("对象无法被构建");
        }
        
        username = document.getElementById("username").value;
        password = document.getElementById("password").value;
        
        xmlhttp.onreadystatechange = handchange;
        xmlhttp.open("POST","Servlet1?username="+username+"&password="+password,true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //设置的HTTP头
        xmlhttp.send("task=task&msg=msg");  //此处只是为了证明send()的使用方法,无意义
    }
    
    function handchange(){
        if(xmlhttp.readyState == 4){
            if(xmlhttp.status == 200){
                document.getElementById("txt").innerHTML = xmlhttp.responseText;
            }
        }else{
            document.getElementById("txt").innerHTML = "耐心等待...";
        }
    }

      下面创建一个Servlet注意在web.xml里面的映射名称要和xmlhttp.open("POST","Servlet1?username="+username+"&password="+password,true);此处的Servlet1一致。

      Servlet1,doPost代码如下:

    response.setContentType("text/html");
            response.setCharacterEncoding("UTF-8");
            PrintWriter out = response.getWriter();
            String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");
            String password = new String(request.getParameter("password").getBytes("ISO-8859-1"),"UTF-8");
            String task = new String(request.getParameter("task").getBytes("ISO-8859-1"),"UTF-8");
            String msg = new String(request.getParameter("msg").getBytes("ISO-8859-1"),"UTF-8");
            
            System.out.println(username+""+password);
            if(task.equals("task")){
                if(msg.equals("msg")){
                    out.println(username+""+password);//send()若是成功传入了数据则,在.html也面中显示输入的值
                }
            }

      截图如下:

    输入数据,点击提交,截图如下:

  • 相关阅读:
    以此来励志吧!!!(选自:知乎)
    【P1303】苹果二叉树
    【P1813】8的倍数
    2016.9.4 の 測試
    后缀数组
    个中模板
    基数排序
    【NOIP2014D2T3】解方程
    【HAOI2006】【BZOJ1051】【p1233】最受欢迎的牛
    java安全性-引用-分层-解耦
  • 原文地址:https://www.cnblogs.com/xiangxi/p/4705631.html
Copyright © 2011-2022 走看看