我现在有一个页面
<form method="post" action="https://test/regist/Reg2">
<div>
姓:<input name="test1" type="text" />
名:<input name="test2" type="text" />
</div>
<div>
邮编<input name="test3" type="text" />-<input name="test4" type="text" />
</div>
<button name="ok" type="submit">
</button>
</form>
这种页面,我现在需要submit的时候把 'test1'和'test2'合并成'name'
把'tets3'和‘test4'合并成addr
这就不能用按钮自带的submit了,应该要怎么写才能达到和按钮自带的submit相同的传参?
用ajax。
在按钮上加一个点击事件,把buttin的type="submit"去掉,把form标签去掉。在事件中做数据操作,然后使用ajax完成数据传递。ajax怎么写就不赘述了。
思路:点击按钮,触发事件,事件中做值的合并操作,并使用ajax向https://test/regist/Reg2发送数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>the final project</title>
<link rel="stylesheet" href="css/finalproject.css" />
<script src="js/finalproject.js"></script>
<style>
</style>
</head>
<body class="bkgimg">
<!-- <form method="post" action="https://test/regist/Reg2"> -->
<div onchange="myFunction()">
<div>
姓:<input name="test1" type="text" id="text1"//>
名:<input name="test2" type="text" id="text2"//>
</div>
<div>
邮编<input name="test3" type="text" id="text3"/>-<input name="test4" type="text" id="text4"//>
</div>
<div onclick="clickfunc()">提交</div>
</div>
<!-- </center> -->
<script>
var obj = {}
var text1 = document.getElementById('text1').value
console.log('--------',text1)
// obj.name =
function myFunction(ev){
var ev = ev || window.event;
var oinput = ev.srcElement || ev.target;
if(oinput.nodeName.toLowerCase() == 'input'){
if(oinput.id=='text1'){
obj.name = oinput.value
}else if(oinput.id == 'text2'){
obj.name = obj.name + oinput.value
}else if(oinput.id == 'text3'){
obj.addr = oinput.value
}else{
obj.addr = obj.addr + oinput.value
}
console.log('========',obj)
}
}
function clickfunc(){
var httpRequest = new XMLHttpRequest();//第一步:创建需要的对象
httpRequest.open('POST', 'url', true); //第二步:打开连接/***发送json格式文件必须设置请求头 ;如下 - */
httpRequest.setRequestHeader("Content-type","application/json");//设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)var obj = { name: 'zhansgan', age: 18 };
httpRequest.send(JSON.stringify(obj));//发送请求 将json写入send中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {//请求后的回调接口,可将请求成功后要执行的程序写在其中
if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
var json = httpRequest.responseText;//获取到服务端返回的数据
console.log(json);
}
};
}
</script>
</body>
</html>
希望对你有用
后端接收的时候直接拼接不香么