Jquery Ajax只工作一次 - Jquery Ajax woking only once

function postData() {
    var fName=$("#fName").val();
    var lName=$("#lName").val();
    var city=$("#city").val();
    var data="fName="+fName+"&lName="+lName+"&city="+city+"&submit=submit";
    $.ajax({
        type:'POST',
        url:'employeeajaxcodebehind.php',
        data:data,
        success:function(data){
        $("#results").html(data);
        }
    });
}

Php代码

if(isset($_POST['submit'])) {
    $fName=$_POST['fName'];
    $lName=$_POST['lName'];
    $city=$_POST['city'];
    $Query="INSERT INTO employee(emp_id,firstname,lastname,city) VALUES ('','$fName','$lName','$city')";
    $Result=mysql_query($Query);
    viewRecord();
}

Html:

<form method="POST">
    Firstname: <input type="text" id="fName" name="fName"><br>
    Lastname: <input type="text" id="lName" name="lName"><br>
    City: <input type="text" id="city" name="city"><br>
    <input type="submit" id="submit" name="submit" onclick="postData();">
</form>

现在的问题是，每当我打开页面，我插入一条记录，并成功保存在我的DB。但当我添加另一个记录，它没有得到保存…每次插入时我都要重新加载页面。

有什么问题吗?php函数viewRecord();也应该执行，但它没有…

使用.serialize()从表单中获取数据。

你的表单发送数据两次-在onclick和onsubmit。请添加return false;

防止onsubmit事件

@skparwal提到的问题是，您试图将"插入到主键中。您需要在插入后使用mysql_error()来查看发生的错误。看看这个链接如何做到这一点:http://php.net/manual/en/function.mysql-error.php

此外，您的ajax不会像预期的那样工作，因为您没有为onClick()返回false，这意味着表单在ajax调用被触发后每次都被提交。

此外，你应该转移到mysqli或PDO，因为mysql已被弃用。

编辑

尝试这个，但它并不意味着工作或成为最终实现，它只是让你走上正确的道路。它是未经测试的，所以可能会有一些错误:

把你的javascript改成:

$(function(){
    $('#submit').click(postData);
});
function postData() {
    var fName=$("#fName").val();
    var lName=$("#lName").val();
    var city=$("#city").val();
    var data="fName="+fName+"&lName="+lName+"&city="+city+"&submit=submit";
    $.ajax({
        type:'POST',
        url:'employeeajaxcodebehind.php',
        data:data,
        success:function(data){
            $("#results").html(data);
        }
    });
    return false;
}

把你的PHP改成:

if(isset($_POST['submit'])) {
    $fName=$_POST['fName'];
    $lName=$_POST['lName'];
    $city=$_POST['city'];
    $Query="INSERT INTO employee(firstname,lastname,city) VALUES ('$fName','$lName','$city')";
    if( !( $Result=mysql_query($Query) ) )
        exit( '@todo need to check for error here' );
    viewRecord();
}

把你的HTML改成:

<form method="POST">
    Firstname: <input type="text" id="fName" name="fName"><br>
    Lastname: <input type="text" id="lName" name="lName"><br>
    City: <input type="text" id="city" name="city"><br>
    <input type="submit" id="submit" name="submit">
</form>

这是因为您将emp_id添加为空白(如果它不是主键或唯一键)。您需要在sql:

中省略它。

$sql = "INSERT INTO employee(firstname,lastname,city) VALUES ('$fName','$lName','$city')";

JS的变化:当你使用提交按钮。您需要防止页面不刷新。所以像这样修改ajax调用:

<script type='text/javascript'>
    /* attach a submit handler to the form */
    $("#commentForm").submit(function(event) {
      /* stop form from submitting normally */
      event.preventDefault();
      /* get some values from elements on the page: */
      var $form = $( this ),
      var url =  "employeeajaxcodebehind.php" // or $form.attr( 'action' );
      /* Send the data using post */
      var posting = $.post( url, { fName: $('#fName').val(), lName: $('#lName').val(), city: $('#city').val() } );
      /* Put the results in a div */
      posting.done(function( data ) {
        $("#results").html(data);
      });
    });
</script>