通过jquery获取表单值,发送到PHP脚本,并让PHP脚本处理错误和返回值


get a forms values via jquery, post to a php script, and have php script process for errors and return value

我有这样一个表单:

<form action= 'addperm.php' class = 'addperm' method='post'>
    <input type='text' name='user' /><br />
    <input type='radio' name='perm' value='1' CHECKED /> Can view only<br />
<input type='radio' name='perm' value='2' /> Can make changes <br />
<input type='submit' value='Add'>
</form>

我想知道如何,不重定向到另一个页面,我可以得到这两个输入值(用户和perm),通过ajax将它们发布到php脚本,然后让php返回结果

阅读$.post的jQuery API文档。

$('input[type=submit]').click(function(e){
    $.ajax({
        type: "POST",
        url: "some.php",
        data: "user=" + $('input[name=user]').val() + "&perm=" + $('input[name=perm]:checked').val(),
        success: function(msg){
            // msg is your content
        }
    });
    e.preventDefault();
});

some.php

echo json_encode(array($_POST['user'],$_POST['perm']));

从http://jquery.com下载jQuery

将其包含在你的页面标题中,如:

<script type="text/javascript" src="jquery/jquery.min.js"></script>

把src改成你下载的文件名

然后在页面的头部粘贴这个:

<script type="text/javascript">
$(document).ready(function() {
    $('.addperm').submit(function(){
        var query = 'perm='+$('#perm').val()+'&user='+$('#user').val(); 
            $.post("addperm.php", query, function(response){
                alert(response);
            });
    });
});
</script>

要使这个工作,你必须改变你的HTML为:

<form action= 'addperm.php' class = 'addperm' method='post'>
<input type='text' name='user' id='user' /><br />
<input type='radio' name='perm' value='1' id='perm' CHECKED /> Can view only<br />
<input type='radio' name='perm' value='2' id='perm' /> Can make changes <br />
<input type='submit' value='Add'>
</form>

我还没有测试过,但是应该可以。