通过ajax提交表单数据时出了点问题

时间:2018-07-18 11:29:51

标签: jquery ajax

我正在尝试使用ajax将表单的数据提交到数据库。我无法弄清楚出了什么问题。

下面是包含表单数据的HTML。

HTML->

<form id="myForm" method="post">
    NAME:<input type="text" id="name" name="name">
    PICKUP:<input type="text" id="pick" name="pick">
    DROP:<input type="text" id="drop" name="drop">

    <input type="submit" id="sub" value="Submit"></button>
  </form>
  <div class=".data"></div>

下面的部分包括ajax调用。我包括了jQuery CDN。

JAVASCRIPT->

$("#myForm").submit( function(){
        var name = $("#name").val();
        var pick = $("#pick").val();
        var drop = $("#drop").val();
        var str = name+"/"+pick+"/"+drop;
        $.ajax({
          type: "POST",
          url: "p_inp.php",
          data: "str="+str,
          success: function(data){
            $(".data").html(data);
          }
        });

    });
    $("#myForm").submit( function(){
    return false;
  });

以下是将数据输入数据库的PHP文件。

PHP文件->

    <?php

    $con = mysqli_connect('localhost','root','pagal.com','next');

    //echo 'HI';
    $str = $_POST['str'];
    $s = explode("/",$str);
    $name = $s[0];
    $pick = $s[1];
    $drop = $s[2];


    $sql = "select count(*) as c from passenger";
    $res = $con->query($sql);
    while($row = $res->fetch_assoc())
    {
        $c = $row['c'];
    }
    $c = $c+1;
    //echo $c;
    $sql = "insert into passenger values('$c','$name','$pick','$drop')";
    if($con->query($sql))
        echo 'Data entered Successfully<br>';
    else echo 'Something Went Wrong<br>';

    $con->close();

?>

1 个答案:

答案 0 :(得分:1)

您可以尝试删除第二个 submit()函数,修改第一个Submit函数以防止默认设置吗。

类似这样的东西。

$("#myForm").submit( function(event){
    var name = $("#name").val();
    var pick = $("#pick").val();
    var drop = $("#drop").val();
    var str = name+"/"+pick+"/"+drop;
    $.ajax({
      type: "POST",
      url: "p_inp.php",
      data: "str="+str,
      success: function(data){
        $(".data").html(data);
      }
    });
  event.preventDefault();
});