Question

我有一个简单的PHP Intranet站点，其中有一个HTML表单，需要2个输入字段。我想从HTML表单中获取用户输入，将值插入MySQL数据库，但将用户的浏览器保留在同一页面上。我有一个单独的PHP文件来执行MySQL INSERT。我一直试图用纯PHP和jQuery的帮助来做到这一点，但我不能让它工作！任何帮助将不胜感激。

这是我的HTML表单（在PHP文件中）：

<form name ="form" action="" method="POST">
  Claim Title: <br>
  <input type="text" name="title" required>
  <span class="error">* </span>
  <br><br>

  Claim Body: <br>
  <textarea name="claim" rows="5" cols="40"></textarea>
  <br><br>

  <input type="submit" name ="submit" value="Submit"/>
</form>

执行db处理的PHP文件名为db-insert.php：

<?php

    require 'connect.php';
    $conn = Connect();

    // Claim form and sql insert variables
    $title          = $conn->real_escape_string($_POST['title']);
    $claim          = $conn->real_escape_string($_POST['claim']);
    $claimInsert    = "INSERT INTO claims(claim_title,claim_body,claim_type) VALUES('" . $title . "','" . $claim . "','T');";
    $success        = $conn->query($claimInsert);

    $conn->close();

?>

connect.php文件：

<?php

    function Connect(){

        // Connection variables
        $servername = "localhost";
        $username   = "user";
        $password   = "password";
        $dbname     = "db";

        // Create connection
        $conn = new mysqli($servername, $username, $password, $dbname) or die($conn->connect_error);

        return $conn;
        }
?>

最后我写的.js文件（我使用的术语＆＃39;写得很松散，因为我从另一个类似的StackOverflow页面获得它）：

$(document).ready(function(){
  $("button").click(function(){
    $.get("db-insert.php", function(data, status){
      alert("Data: " + data + "/nStatus: " + status);
    });
  });
});

我是jQuery / AJAX /相关JavaScript的新手，我的PHP技能正在增长，但并不令人惊讶。我正在使用FireFox JavaScript调试器控制台，当我单击表单的SUBMIT按钮时，它不会显示任何内容，这使我认为它不会处理表单数据。

编辑：我应该添加这个来支持我之前发表的评论 - 我正处于开发工作的早期阶段，请不要告诉我参与并保护我的SQL语句 - 我知道这一点：）

Answer 1

像这样的东西

$(document).ready(function(){

  $('form[name="form"]').submit( function(e){
    e.preventDefault();

    /*
    you can put the url in the form action as normal, 
    its an old habit of mine, so if JavaScript is off on 
    the clients browser the form still works.
    */
    var url = $(this).attr('action'); 
    var iData = {
      title: $('input[name="title"]').val(),
      claim: $('textarea[name="claim"]').val()
    };
    
    console.log(url);
    console.log(iData);

    /*
     Obviously you're going to need to un-comment this,
     Ajax doesn't really work well on SO website

     $.post(url, iData, function(data){
      //do something on return
    });
    */
    
    //yea it's old school
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name ="form" action="db-insert.php" method="POST">
  Claim Title: <br>
  <input type="text" name="title" value="" required>
  <span class="error">* </span>
  <br><br>

  Claim Body: <br>
  <textarea name="claim" rows="5" cols="40"></textarea>
  <br><br>

  <input type="submit" name ="submit" value="Submit"/>
</form>

Answer 2

使用$.post()将您的数据发送到PHP和preventDefault()，以防止该网页重新加载。

$.post() - 使用HTTP POST请求从服务器加载数据。

preventDefault() - 如果事件可取消，则preventDefault（）方法会取消该事件，这意味着不会发生属于该事件的默认操作。

$(document).ready(function(){

    $("form").on('submit', function(e){
        e.preventDefault();
        var data = {title: $('#title').val(), claim: $('#claim').val()};
        console.log(data);
        // $.post("db-insert.php", data, function(data, status){
        //     alert("Data: " + data + "/nStatus: " + status);
        //     });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name ="form" action="" method="POST">
    Claim Title: <br>
    <input id="title" type="text" name="title" required>
    <span class="error">* </span>
    <br><br>

    Claim Body: <br>
    <textarea id="claim" name="claim" rows="5" cols="40"></textarea>
    <br><br>

    <input id="sub" type="submit" name ="submit" value="Submit"/>
</form>

然后在db-insert.php

中

    <?php
    $title = $_POST['title'];
    $claim = $_POST['claim'];

    // rest of the code here

Answer 3

如果您的主要目标是在不更改或刷新页面的情况下执行此操作，则可以像这样使用Ajax和jQuery：

    $(document).on('click', '#submit-my-form', function(){
    var title = $("#title").val();
    var claim = $("#claim").val();

      jQuery.ajax({
      type: "POST",
      url: "http://your-site-url/db-insert.php",
      dataType: 'json',
      data: {title: title, claim: claim},
        success: function(res) {
          if (res)
          {
            alert('Hurray! Successfully done');
          }
        },
        error: function(xhr) {
          if (xhr)
          {
            alert('There was an error');
           }
        }
      });
    });

您还可以添加代码以接收插入状态，并在Ajax代码的返回部分中处理它。通过向输入添加id标记来修改您的html代码，如下所示：

    <input type="text" name="title" id="title" required>

    <textarea name="claim" id="claim" rows="5" cols="40"></textarea>

    <input type="submit" name ="submit" id="submit-my-form" value="Submit"/>

应该这样做。

Answer 4

希望可以帮助你

$("document").ready(function()
{
    $("[name='submit']").click(function ()
    {
        sendS();
    });

});

function sendS()
{
    $.ajax(
    {
        type:"POST",
        dataType:"json",
        url:"php.php",
        data:{title:$("[name='title']"),claim:$("[name='claim']")},

        success: function(data)
        {
            //display or do somethg
            alert(data);
        },
        error: function () 
        {
            alert("Error!");
        }
    }); 
}



<?php
$data1=$_POST["title"];
$data2=$_POST["claim"];

echo "Title : ".$data1."<br> Claim : ".$data2;
?>

PHP jQuery HTML表单插入到MySQL然后保持在同一页面上

4 个答案: