form表单的值转为json jquery form表单提交到jsp
转载
分析用到jsp部分的两种情况,一是用到form表单提交数据到jsp进行处理,一种是通过ajax传递数据到jsp进行处理返回数据。这里有几个常用的程序段,下面一一记录,方便以后使用。
1、通过form表单提交数据:
<form method="post" action="sql.jsp" οnsubmit="return checklog">
<input type="text" name="message" placeholder="请输入留言"/>
<input type="text" name="username" placeholder="尊姓大名"/>
<input type="hidden" name="act" value="insert"/>
<button type="submit">提交</button>
<!--<input type="submit" value="提交">-->
</form>
|
简述:其中method里面写的是传值方式,一共有两种,一个是get传值,一个是post传值,具体区别下次再总结;action是写提交到那个jsp表单进行处理,同一文件夹可以直接写,不同文件夹要写路径。onsubmit一般是客户端js进行判断后再上传,checklog是一个函数,用来进行检测验证。其中input的type为hidden是为了给后台传值是insert,从而jsp文件可以根据不同的表单传过来的值进行操纵数据库,是增删改查的哪一个。其中提交按钮用那种写法都可以,但要注意写上type类型。
通过ajax提交数据form写法:
<form>
<input name="username" type="text" placeholder="请输入用户名">
<button id="btn" type="button">提交</button>
<span></span>
</form>
|
简述:这里因为是用js获取值通过ajax提交处理,所以form不需要action。其中的span是用来接受jsp返回数据的标签。
2、js部分,第一种没有影响可以正常写,第二种会用到$.get|$.post|$.load传递数据
因为html里面经常用到input并且都有name值,所以写的时候可以用name的方法获取input的value值。
var username = $("*[name='username']").eq(0).val(); //获取vlaue值默认是获取第一个input的值,如果没有那么多就不用写索引值了。
|
这是js内function的部分一个是注册验证函数fuction chekreg(){}一个是登录function checklog(){}和简单的的正则判断
function checkreg() {
var username = $("*[name='username']").eq(0).val(); //获取vlaue值
var password = $("*[name='password']").eq(0).val();
var repassword = $("*[name='repassword']").val();
var phone = $("*[name='phone']").val(); //获取vlaue值
var email = $("*[name='email']").val(); //获取vlaue值
if (!username.match(/^[A-Za-z0-9]{3,15}$/)) {
//每个汉字占3个字符
alert("用户名格式错误,请重新输入");
return flase;
}
if (password.length < 8) {
alert("密码长度小于8位");
return false;
}
if (password !== repassword) {
alert("两次输入密码不一致");
return false;
}
if (!phone.match(/^1[34578][0-9]{9}$/)) {
alert("请输入正确的手机号");
return false;
}
if (!email.match(/^[1-9][0-9]{4,10}@qq\.com$/)) {
alert("请输入qq邮箱");
return false;
}
return true;
}
function checklog() {
var username = $("*[name='username']").eq(1).val(); //获取vlaue值
var password = $("*[name='password']").eq(1).val();
if (!username.match(/^[A-Za-z0-9]{3,15}$/)) {
//每个汉字占3个字符
alert("用户名格式错误,请重新输入");
return flase;
}
if (password.length < 8) {
alert("密码长度小于8位");
return false;
}
return true;
}
|
ajax的js写法
$("#btn").click(function () {
var name = $("*[name='username']").val();
var url ="ajax.jsp?username=" + name;
$.get(url,function(data,status){
$("span").html(data);
});
});
|
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。