JQuery的ajax post请求不能正常工作

时间:2012-11-17 23:52:13

标签: php jquery ajax post

页面的链接是:localhost / mysite / create-user

这是代码:

        <form class="form-horizontal" name = "signUp1F" id = "signUp1F">
            <input class="input-xlarge focused" name="pskil" id ="pskil" type="text" placeholder = "Doctor, Trainer, Human Resource etc.">
            <input type="hidden" name="neoid" id="neoid" value="<?php echo $neoid; ?>" />
            <span><button id = "plus" class="btn btn-success">Plus</button></span>
            <div id="skillsAdded"></div>
        </form>

jquery代码:

<script type="text/javascript">
    $('#plus').click( function(event){
        var pskil = $('#pskil').val();
        var neoid = $('#neoid').val();
        if( !pskil){
            alert( "Please write a skill.");
            return false;
        }

        $.ajax({
            type: 'post',
            url: "localhost/mysite/add-skill",
            data: { pskil: pskil, neoid: neoid},
            success: function( response){
                $('#skillsAdded').append( pskil + "<br>");
                return false;
            }
        });
    });
</script>

目的是:用户输入技能值到输入,单击加号按钮,发送ajax请求以将技能添加到数据库。处理此请求的代码位于localhost / mysite / add-skill。

但事情出了问题。当我点击“加号”按钮时,它会转到页面localhost / mysite / create-user?pskil = php&amp; neoid = 53。什么可以使这个方向?我已经在这个问题上工作了近2个小时,我无法处理它。

1 个答案:

答案 0 :(得分:1)

问题是您的按钮标记提交了您的表单。这是您可以使用的更新的JavaScript源代码。 jQuery为事件提供了内置的preventDefault()方法。这将是一个例子,阻止按钮提交表单。

<script type="text/javascript">
    $('#plus').click( function(event){
        event.preventDefault();

        var pskil = $('#pskil').val();
        var neoid = $('#neoid').val();
        if( !pskil){
            alert( "Please write a skill.");
            return false;
        }

        $.ajax({
            type: 'post',
            url: "localhost/mysite/add-skill",
            data: { pskil: pskil, neoid: neoid},
            success: function( response){
                $('#skillsAdded').append( pskil + "<br>");
                return false;
            }
        });
    });
</script>

试用:http://jsfiddle.net/3A7Mg/1/