如果jquery成功，如何运行php-sql代码 - How to run php sql code if jquery is successful

所以我有一个问题，

假设我有这样的php文件：

<?php
        print
        "<div class='col-lg-6 col-md-6 col-sm-6 col-xs-12 col-md-pull-6 col-sm-pull-6'>".
                        "<div class='form-group'>".
                            "<div class='col-md-12'><strong>Forename:</strong></div>".
                            "<div class='col-md-12'><input type='text' class='form-control' id='forename'></div>".
                        "</div>".
                        "<div class='form-group'>".
                            "<div class='col-md-12'><strong>Surname:</strong></div>".
                            "<div class='col-md-12'><input type='text' class='form-control' id='surname'></div>".
                        "</div>".
                            "<div class='form-group'>".
                                "<div class='col-xs-12 col-md-6'>".
                                    "<button id='button' class='btn btn-success btn_add'>Add</button>".
                                "</div>".
                            "</div>".
                        "</div>".
        "</div>";
        }
?>
<script type="text/javascript">     
    $(document).on("click", 'button.btn_add', function(){
        var forename = document.getElementById('forename').value;
        var surname = document.getElementById('surname').value;
        if((forename == null || forename == "") && (surname == null || surname == "")){
            alert("Please fill in all fields");
        }
        else{
            // DO SQL UPDATE VIA PHP
        }
    });
</script>

如何在jquery中对else案例进行sql更新？理想情况下，我希望验证并执行sql语句

查看$.ajax

它会让你按照自己的要求去做。

.. code
else {
    $.ajax({
        url: some_url_to_execute_query.php,
        method: 'post',
        dataType: 'json',
        data: 'forename=' + forename + '&surname=' + surname
    })
     .done(function(response) {
        if (response.success) {
            // notify user query worked
        }
        else {
            // query didn't work; do something
        }
    }
}

PHP（some_url_to_execute_query.PHP）

<?php
$response = [];
// execute your MySQL query here
// make sure to connect to database, etc.
// access $_POST array values using $_POST['forename'] && $_POST['surname']
// then something like so (pseudo):
if ($query) // $query is pseudo variable holding (bool) response from query to determine whether is passed/failed
    $response['success'] = true;
else
    $response['success'] = false;
echo json_encode($response);

您只能从服务器端进行SQL查询，您需要一些API才能从JavaScript进行查询。

您可以使用php打印JavaScript，但不能使用JavaScript从客户端执行php。

为了运行sql查询，您需要使用jquery执行ajax调用。

http://api.jquery.com/jquery.ajax/

因此，您将需要一个单独的php脚本来运行sql查询，然后使用ajax将值POST到表单中。

像这样：

注意type="button"

<?PHP // whatever you need here ?>
<!DOCTYPE html>
<html>
<head>
  <title>Title of page</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(document).on("click", 'button.btn_add', function() {
      var forename = $("#forename").val();
      var surname = $("#surname").val();
      if (!forename || $.trim(forename) == "" || !surname || $.trim(surname) == "") {
        alert("Please fill in all fields");
      } 
      else {
        $.post("update.php", {"forename": forename,"surname": surname}, function(res) {
          $(".btn-success").parent().append("<div>" + res + "</div>");
        }
     });
   });
  </script>
</head>
<body>
  <div class='col-lg-6 col-md-6 col-sm-6 col-xs-12 col-md-pull-6 col-sm-pull-6'>
    <div class='form-group'>
      <div class='col-md-12'><strong>Forename:</strong>
      </div>
      <div class='col-md-12'>
        <input type='text' class='form-control' id='forename'>
      </div>
    </div>
    <div class='form-group'>
      <div class='col-md-12'><strong>Surname:</strong>
      </div>
      <div class='col-md-12'>
        <input type='text' class='form-control' id='surname'>
      </div>
    </div>
    <div class='form-group'>
      <div class='col-xs-12 col-md-6'>
        <button id='button' type="button" class='btn btn-success btn_add'>Add</button>
      </div>
    </div>
  </div>
  </div>
</body>
</html>