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

问题描述:
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
    点赞
  • 4
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

稀饭鲲

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值