自定义submit（）实现ajax提交form表单不刷新跳转

最新推荐文章于 2024-06-15 23:38:46 发布

稀饭鲲

最新推荐文章于 2024-06-15 23:38:46 发布

阅读量7.8k

点赞数 1

文章标签： form后台提交提交form不刷新 ajax提交form 异步提交form表单自定义submit提交表单

本文链接：https://blog.csdn.net/xufankang/article/details/82026036

版权

问题描述：
1.最近一直在为用户信息完善功能所困惑，想要实现：用户提交信息后不跳转到acction()的服务端页面，只要告诉提交成功即可。

2.论坛上大多ajax+json等方法/框架（$ajaxform）都需要导入包或者js文件，本人新手，对于导包的方法和引用js的路径问题等方面不擅长，从早上开始纠结了一天，始终点击提交按钮依然是没有反应，并不会执行ajax+json实现的提交form表单的方法，服务器亦不会报错，始终找不到是导包路径问题还是语法或者环境问题。一直困惑到晚上，我放弃了尝试论坛的各种方法。

3.我想到制作购物车加减数量的按钮，也是使用ajax提交数据给后台而·不跳转页面，并立即自己改写了该ajax方法，重写了submit（），成功实现提交form不跳转！

环境：eclipseJEE+tomcat

提交页：ajax_upload_test.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax_upload_test</title>
</head>
<body>
<script>
    var xmlhttp;
    function loadXMLDoc(url,cfunc)
    {
        if (window.XMLHttpRequest)
        {// IE7+, Firefox, Chrome, Opera, Safari 代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// IE6, IE5 代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("POST",url,true);
        xmlhttp.send();
    }


    function submit(divID,fileUrl,user_id){
        //divID:form表所在容器的id值
        //fileUrl:传入参数，代表服务页所在地址
        //user_id：传入用户ID给后台用于操作数据库

        var URL=fileUrl+"?user_id="+user_id+"&";//定义一个路径，用于拼接链接和变量传值
        var form = document.getElementById(divID);//获取要提交的form表的div
        var inputs = form.getElementsByTagName("input");//获得div中想要提交的所有input值
        for(var i=0;i<inputs.length-1;i++){//inputs.length表示input的数量，即输入框的数量
            URL=URL+inputs[i].getAttribute("name")+"="+inputs[i].value+"&";//在地址中添加变量，用超链接传值
        }
        URL=URL+inputs[inputs.length-1].getAttribute("name")+"="+inputs[inputs.length-1].value;//在地址中添加变量，用超链接传值
        alert(URL); //调试，查看拼接后的超链接
        loadXMLDoc(URL,function()
                {
                    alert("提示信息！"+xmlhttp.readyState+","+ xmlhttp.status);//调试，查看xmlhttp的状态值，用于判断错误类型
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {           
                        document.getElementById("perfectState").innerHTML=xmlhttp.responseText; 
                        aler("提交成功"）;           
                    }                                   
                });           
    }

</script>
<div id="id">
学院:<input name="college" type="text"/>
班级:<input name="Class" type="text"/>
<button onclick="submit('id','user_center\\perfect_info_servlet.jsp',1)">提交</button><!--取消submit的type 变成增加一个submit方法 下面我们在js中实现这个submit方法-->
</div>

完善状态：

<div id="perfectState" >NO</div><!-- 放一个div容器，显示服务端返回的数据，我这里是用户信息完善状态 -->

</body>
</html>

后台服务页：perfect_info_servlet.jsp

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="users.*" %>
<html>
<body>
<%          

        int user_id = Integer.parseInt(request.getParameter("user_id"));//从?链接获取用户ID    
        users people=new users(user_id);//创建uesr实体，调用set方法

       // String address = new String(request.getParameter("address").getBytes("ISO8859_1"),"UTF-8");
        String college = new String(request.getParameter("college").getBytes("utf-8"),"UTF-8");
        String Class = new String(request.getParameter("Class").getBytes("utf-8"),"UTF-8");
        //String ID_card = new String(request.getParameter("ID_card").getBytes("ISO8859_1"),"UTF-8");
       // String phone = new String(request.getParameter("phone").getBytes("ISO8859_1"),"UTF-8");
        //************调用user类的set方法进行存储******************//
         // people.setUser_phone(phone);
         // people.setAaddress(address);
          people.setCollege(college);
          people.set_Class(Class);
         // people.set_ID_card(ID_card);
        out.println(people.getPerfect_state());     
%>
</body>
</html>

ps:因为只是测试，这里只传入了学院和班级两个input值，后台里其它接受值都被注释了。
ps:此处的users类方法是编者自己写的用于实时操作数据库中users表的。

结果图：

这里写图片描述

数据库中已经成功改变

稀饭鲲

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
自定义submit（）实现ajax提交form表单不刷新跳转

问题描述： 1.最近一直在为用户信息完善功能所困惑，想要实现：用户提交信息后不跳转到acction()的服务端页面，只要告诉提交成功即可。2.论坛上大多ajax+json等方法/框架（$ajaxform）都需要导入包或者js文件，本人新手，对于导包的方法和引用js的路径问题等方面不擅长，从早上开始纠结了一天，始终点击提交按钮依然是没有反应，并不会执行ajax+json实现的提交form...
复制链接

扫一扫