关于ajax取返回值的问题 10C

最近在学习ajax的运用,遇到了一个问题。
之前用ajax往后台传值并取回后台的返回值,运行起来没有问题。之后我想在前端假如一个提示框,数据改为表单传递,然后再想用ajax取返回值就不能实现提示信息(“密码修改成功”和“账号与原密码不匹配,请重新输入!”)了。代码如下

 <head>
<script>
function validateForm(){
var x=document.forms["myForm"]["Username"].value;
var p=document.forms["myForm"]["Password"].value;
var c=document.forms["myForm"]["ChangePass"].value;
var a=document.forms["myForm"]["NewPass"].value;
if (x==null || x==""){
  alert("姓必须填写!");
  return false;
    }
if (p==null || p==""){
    alert("密码必须写!");
    return false;
    }
if (c==null || c==""){
    alert("重置密码必须写!");
    return false;
}
if (a==null || a==""){
    alert("确认密码必须写!");
    return false;
}
if (c != a){
    alert("确认密码与重置密码不一致!");
    return false;
}
$.ajax({
    async:false,
    success:function(data){
        if(data == 1){
            alert("密码修改成功!");
        }else if(data == 0){
            alert("账号与原密码不匹配,请重新输入!");
        }
    },
        error : function() {
            alert("网络故障!");
        }   
    });
}
</script>
</head>
<body>

<form name="myForm" action="ChangeServlet" onsubmit="return validateForm()" method="post">
<table>
    <tr>
        <th>姓名: </th>
        <td><input type="text" name="Username"></td>
    </tr>
    <tr>
        <th>密码: </th>
        <td><input type="password" name="Password"></td>
    </tr>
    <tr>
        <th>修改密码:</th>
        <td><input type="password" name="ChangePass"></td>
    </tr>
    <tr>
        <th>确认密码:</th>
        <td><input type="password" name="NewPass"></td>
    </tr>
    <tr>
        <td><input type="submit" value="提交"></td>
    </tr>
</table>
</form>

后台部分代码传递返回值的代码为

 PrintWriter out = response.getWriter();
            String sql = "select * from LoginUser where UserName = '"+username+"' and LoginPwd = '"+pasword+"'";
            PreparedStatement ps = conn.prepareStatement(sql);
            ResultSet rs = ps.executeQuery();
            if(rs.next()){
                String isExit = "update LoginUser set LoginPwd = ? where UserName = '"+username+"'";
                PreparedStatement ps2 = conn.prepareStatement(isExit);
                ps2.setString(1,changepass);
                ps2.executeUpdate();
                ps2.close();
                conn.close();
                out.println("1");
            }else{
                out.println("0");
            }

之前也试过用ajax传值,但是用ajax传值最开始的判断提示框不能显示(“密码必须写”等等)想问问应该怎么改?

9个回答

可以使用validator插件对表单进行校验,例如:
$("#saveWorkExtra").validate({
onsubmit:true,// 是否在提交是验证
onfocusout:false,// 是否在获取焦点时验证
onkeyup :false,// 是否在敲击键盘时验证

rules: {
....
},
messages:{
....
},
submitHandler: function(form) { //通过之后回调
var param = $("#saveToWorkExtra").serialize();
$.ajax({
url : "workExtraChange.action",
type : "post",
dataType : "json",
data: param,
success : function(result) {
if(result=='success') {
location.href='allRequisitionList.action';
} else {
var jsonObj = eval('('+result+')');
}
}
});
},
invalidHandler: function(form, validator) { //不通过回调
return false;
}
});

数据和视图的逻辑分离开,数据返回后可以进行根据返回的数据进行操作,表单提示可以加id或者class来进行操作;

首先你可以alert(data)看看是什么值,用data == '1'试试

这样的sql有危险,建议不要使用这种方式。

 <head>
</head>
<body>

<form name="myForm" action="" method="post">
<table>
    <tr>
        <th>姓名: </th>
        <td><input type="text" name="Username"></td>
    </tr>
    <tr>
        <th>密码: </th>
        <td><input type="password" name="Password"></td>
    </tr>
    <tr>
        <th>修改密码:</th>
        <td><input type="password" name="ChangePass"></td>
    </tr>
    <tr>
        <th>确认密码:</th>
        <td><input type="password" name="NewPass"></td>
    </tr>
    <tr>
        <td><input type="button" value="提交" onclick="validateForm()"/></td>
    </tr>
</table>
</form>

<script>
function validateForm(){
var x=document.forms["myForm"]["Username"].value;
var p=document.forms["myForm"]["Password"].value;
var c=document.forms["myForm"]["ChangePass"].value;
var a=document.forms["myForm"]["NewPass"].value;
if (x==null || x==""){
  alert("姓必须填写!");
  return false;
    }
if (p==null || p==""){
    alert("密码必须写!");
    return false;
    }
if (c==null || c==""){
    alert("重置密码必须写!");
    return false;
}
if (a==null || a==""){
    alert("确认密码必须写!");
    return false;
}
if (c != a){
    alert("确认密码与重置密码不一致!");
    return false;
}
$.ajax({
url:"ChangeServlet",//方法路径
data:$("form [name='myForm']").serialize()//表单参数
type:"post",//请求类型
dataType:"json",//结果类型
    async:true,//异步
    success:function(data){
        if(data == 1){
            alert("密码修改成功!");
        }else if(data == 0){
            alert("账号与原密码不匹配,请重新输入!");
        }
    },
        error : function() {
            alert("网络故障!");
        }   
    });
}
</script>

密码是否为空、以及长度这些的验证在你用ajax之前,可以自己写,也可以用插件,网上有很多的

没搞懂你的问题核心在哪里,ajax传到后台还是用json比较好吧,而且你直接用jquery去出嚟submit事件不是更好吗?设置id用getelementbyid获取控件再用ajax传值不就好了为什么要执着于用表单传值呢?

会不会是表单提交影响了你的ajax提交,建议不用onSubmit绑定,将提交按钮的‘type’属性修改为‘button’,通过onclick来绑定validateForm函数

应该是是表单提交影响了你的ajax提交后的执行,建议不用onSubmit绑定,将提交按钮使用单标签的,将它的‘type’属性修改
为‘button’,通过onclick来绑定validateForm函数。应该就可以了,问题出在Ajax提交后直接返回表单,寻找form的action地址了,因此
没有执行success这个回调函数,所以没有弹窗提示。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问