Jsp小结form js部分

 

分析用到jsp部分的两种情况，一是用到form表单提交数据到jsp进行处理，一种是通过ajax传递数据到jsp进行处理返回数据。这里有几个常用的程序段，下面一一记录，方便以后使用。

1、通过form表单提交数据：

<form method="post" action="sql.jsp" onsubmit="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);

});

});