form表单提交,用submit方法并且跳到指定页面或不跳转

开发环境后台Java

后台根据提交的整个表单,通过name名对应的value值;

<form method="POST" class="form-horizontal" name="myform" action='http://192.168.20.205:8080/platform/project/enroll' id="formde" target="" enctype="multipart/form-data" οnsubmit="return formText()">
							<p id="clickperson">项目申请表</p>
							<div id="personalshow">
								<p><span>负责人姓名<b>*</b></span><input type="text" required name="project.user_name" id="user_name" value="" style="background: url(images/ren.png) no-repeat center left;" /></p>
								<p><span>性别</span>
									<div id="aaas">
										<div id="onswitch">
											  女   
											<input type="checkbox" class="onswitchs sexstyle" />    男
										</div>
									</div>
								</p>
								<p>
									<span>联系邮箱<b>*</b></span>
									<input type="text" required name="project.email" id="emiasdz" value="" style="background: url(images/emio.png) no-repeat center left;" />
								</p>
								<p>
									<span>微信号<b>*</b></span>
									<input type="text" name="project.wechat" id="wxname" value="" style="background: url(images/wx.png) no-repeat center left;" />
								</p>
								<p>
									<span>联系电话<b>*</b></span>
									<input type="text" required name="project.phone" id="phonss" value="" style="background: url(images/tpname.png) no-repeat center left;" />
								</p>
								<p>
									<span>项目名称<b>*</b></span>
									<input type="text" required name="project.name" id="xmname" value="" style="background: url(images/xmname.png) no-repeat center left;" />
								</p>
								<p id="filestyle">
									<span>上传BP</span>
									<span style="width: 73%;position:absolute;left:25%;top:0;height: 40px;" id="filetext">点击此处上传文件</span>
									<input type="file" name="project.file_url" id="bpclick" value="" />
								</p>
								<p>
									<span>项目简介<b>*</b></span>
									<textarea type="" id="" name="project.project_description" /></textarea>
								</p>
							</div>
							<!--<input type="button" value="" class="btn2" onclick = "checkUser();" />-->
							<input type="submit" name="projectform" value="提交" id="submits" style="width: 150px;" />
						</form>

请大家不要在意细节委屈

在网上看了很多方法感觉不稳妥最后自己都不知道什么情况了;但是有一点我引入了jq的form.js;

<script src="js/jquery-form.js"></script>

                  $("#filetext").text(name)// console.log();})function formText() {

    $("#formde").ajaxSubmit(function(message) {

window.location.href = "index.html";})

$.ajax({

     url: "你的url",

type: "post",

dataType: "jsonp",

jsonp: "callback",

     async: false,success: function(data) {},

error: function(data) {

      if(data.status == 200) {var result = document.getElementById("user_name").value;

       var emiasdz = document.getElementById("emiasdz").value;

       var phonss = document.getElementById("phonss").value;

var xmname = document.getElementById("xmname").value;

if(result == "") {

alert("请填写您的中文姓名");

return false;}

if(emiasdz == "") {

        alert("请填写邮箱");

return false;}if(xmname == "") {

alert("请填写项目名称");

return false;}

if(!(/^1[3|4|5|8][0-9]\d{8}$/.test(phonss))) {

alert("请填写正确手机号码");

return false;

}alert("资料上传成功");

window.location.href = "index.html";

      } else {

       alert("发送过程出现问题,请检查网络并重新提交!");}}});

return false;}

我最后的时候投机取巧了,ajax返回直接进入到错误中但是还是200 4所以我直接判断是从错误中获取的,后台也接收到数据,所以我才大胆的这么做了。

window.location.href = "index.html"; 是用来连接新的页面,这个都是知道的。

这是他的基础代码
利用jquery的ajaxSubmit函数以及form的onsubmit函数完成,如下: 

复制代码代码如下:


< form id="saveReportForm" action="saveReport.htm" method="post" οnsubmit="return saveReport();"> 
< input type="submit" value="保存报告"/> 
< /form> 


form增加一个id用于在jquery中调用,增加一个onsubmit函数用于submit前自己提交表单 

saveReport对应函数为 

复制代码代码如下:

function saveReport() { 
// jquery 表单提交 
$("#saveReportForm").ajaxSubmit(function(message) { 
// 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容 
}); 

return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转 

希望大家能给出更好的建议和意见相互学习



要实现form表单提交跳转页面并刷新,可以使用Ajax技术。具体步骤如下: 1. 给form表单添加一个id属性,方便在JavaScript中使用。 2. 使用JavaScript获取form表单元素和提交按钮元素。 3. 给提交按钮元素添加一个click事件监听函数,在函数中使用Ajax发送请求。 4. 在Ajax成功的回调函数中,根据后端返回的数据进行相应的操作,比如更新页面中的数据等。 下面是一个示例代码: HTML代码: ```html <form id="my-form" action="submit.php" method="post"> <input type="text" name="name"> <input type="submit" value="提交"> </form> ``` JavaScript代码: ```javascript var form = document.getElementById('my-form'); var submitBtn = form.querySelector('input[type="submit"]'); submitBtn.addEventListener('click', function(e) { e.preventDefault(); // 阻止默认的提交行为 var xhr = new XMLHttpRequest(); xhr.open('POST', form.action, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 后端返回的数据 var data = xhr.responseText; // 对数据进行相应的操作 // ... } }; xhr.send(new FormData(form)); }); ``` 其中,FormData对象用于将form表单中的数据打包成一个键值对的对象,方便发送给后端。另外,需要注意的是,这里使用了XMLHttpRequest对象进行Ajax请求,如果需要兼容老版本的IE浏览器,需要使用ActiveXObject对象。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值