AJAX提交表单

作者: _借东西的小人 | 来源:发表于2018-04-26 14:32 被阅读18次

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。也就是说,允许浏览器与服务器通信而无需刷新当前页面的技术。

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
**首先举个简单的get请求的例子

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <script type="text/javascript">
        window.onload = function () {
            //1.获取a节点,为其添加onclick响应函数
            document.getElementsByTagName("a")[0].onclick = function(){
                //3.创建一个XMLHttpRequest对象
                var request = new XMLHttpRequest();
                //4.准备发送请求数据:url
                //添加时间戳,起到禁用缓存的作用
                var url = this.href + "?time=" + new Date();
                var method = "GET";
                //5.调用XMLHttpRequest对象的open方法
                request.open(method,url);
                //6.调用XMLHTTPRequest对象的send方法
                request.send(null);
                //7.为XMLHttpRequest对象添加onreadystatechange响应函数(事件的处理函数)
                request.onreadystatechange = function () {
                    //8.判断相应是否完成:XMLHttpRequest对象的readyState属性值为4的时候
                    if(request.readyState==4){
                        //9.再判断相应是否可用:XMLHTTPRequest对象的status属性值为200
                        if(request.status==200||requrst.status==304){
                            //10.打印相应结果:requestText
                            alert(request.responseText);
                        }
                    }
                }
                //2.取消a节点的默认行为
                return false;
            }
        }
    </script>
</head>

<body>
<a href="login.jsp">超链接</a>
</body>
</html>

实现效果就是弹出login.jsp的内容而不让页面刷新。
在<javascript>标签里面编写AJAX代码
1.创建表单

<form>
   <input type="text" name="name" id="name">
   <input type="text" name="age" id="age">
   <input type="text" name="gender" id="gender">
    <input type="button" id="sub" value="提交">
 </form>

2.编写js部分

<script src="js/jquery-1.11.1.min.js"></script>//引入jar包
<script>
  $('#sub').click(function(){
    var name = $("#name").val();
    var age = $("#age").val();
    var gender = $("#gender").val();
        $.ajax({
            type:"POST",//提交方式
            url:"TestServlet",//提交的url请求(一般是servlet请求)
            data:{"name":name,"age":age,"gender":gender},//将数据封装成json格式
            dataType:"json",//数据类型
            success:function (data) { //回调函数           
                window.location.href="success.jsp"
            }
        });
    });

</script>
后台的servlet中写的代码:
 response.getWriter().print("1");   

相关文章

网友评论

    本文标题:AJAX提交表单

    本文链接:https://www.haomeiwen.com/subject/zovplftx.html