时间戳

首页 > 解决方案 > 通过 ajax 提交表单数据时出现问题

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();

?>

标签： jqueryajax

解决方案

您可以尝试删除第二个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();
});

推荐阅读