如何使提交按钮既通过 PHP -> MySQL 发送表单又执行 javascript？答案

【问题标题】：how to make submit button both send form thru' PHP -> MySQL and execute javascript?如何使提交按钮既通过 PHP -> MySQL 发送表单又执行 javascript？
【发布时间】：2016-08-26 04:25:33
【问题描述】：

我遇到了问题。当我点击提交时，我的表单值被发送到数据库。但是，我希望表单能够将值发送到数据库并执行我的脚本，如标题中所述。

当我点击提交按钮时，表单被发送到数据库并且脚本仍然被忽略。但是，如果我在输入区域中输入空值，则执行 javascript，并执行我想要的操作（即显示隐藏的），但由于为空，因此它没有用，因为没有输出来自服务器。

我想要的是：

提交按钮 -> 提交表单 -> 执行 javascript > 显示 div > 出现在 div 数据库中的 SELECT FROM 值（通过提交表单添加的值）。

这可能吗？我的意思是，像这样混合 PHP 和 JavaScript？

提前致谢。

【问题讨论】：

使用AJAX 提交您的表单。
@4castle 可以 AJAX 与 MySQL 数据库交互吗？
有可能先生。参考 : (1) stackoverflow.com/questions/18545941/jquery-on-submit-event (2) stackoverflow.com/questions/1960240/jquery-ajax-submit-form
AJAX 是一种无需重新加载/重定向页面即可从服务器获取响应的方法。您的 JS 将使用 AJAX 调用 PHP，PHP 将以 MySQL 查询的结果进行响应，当 JavaScript 收到响应时，将在您的<div> 中显示响应。
你可以在 javascript 函数中向另一个文件发出 ajax 请求，然后在另一个文件上你可以执行所有 php 代码或 mysql 查询，然后将数据发送回上一页

标签： javascript php mysql

【解决方案1】：

通过两种方式，您可以轻松修复它。

通过 ajax--提交您的表单并获得回复

$('form').submit(function (e){
      e.preventDefault();
      $.ajax({
         type: "POST",
         url: url, //action
         data: form.serialize(), //your data that is summited
         success: function (html) {
             // show the div by script show response form html
          }

    });
      });

首先提交您的 from at action。在这个页面你可以执行你的脚本代码..在动作文件中，

<?php

   if(isset($_POST['name']))
   {
  // save data form and get response as you want.
      ?>
          <script type='text/javascript'>
              //div show script code here
          </script>
      <?php
    }
?>

【讨论】：

【解决方案2】：

她是我上面评论的示例。

在javascript函数中你可以这样做

$.post( '<?php echo get_site_url(); ?>/ajax-script/', {pickup:pickup,dropoff:dropoff,km:km}, function (data) {

        $('#fare').html(data.fare);
        //alert(data.fare);
        fares = data.fare;
        cityy = data.city;
        actual_distances = data.actual_distance;
    }, "json");

在这个 ajax 调用中，我向 ajaxscript 页面发送了一些参数，在 ajaxscript 页面上，我调用了一个 Web 服务并得到这样的响应

$jsonData = file_get_contents("https://some_URL&pickup_area=$pickup_area&drop_area=$drop_area&distance=$km");

echo $jsonData;

此echo $jsonData 将数据发送回上一页。在上一页，您可以看到我使用 data. 来获取响应。

希望对你有帮助！！

【讨论】：

【解决方案3】：

你需要 ajax！像这样的。

HTML

<form method='POST' action='foobar.php' id='myform'>
    <input type='text' name='fname'>
    <input type='text' name='lname'>
    <input type='submit' name='btnSubmit'>
</form>

<div id='append'>

</div>

jQuery

var $myform = $('#myform'),
    $thisDiv = $('#append');

$myform.on('submit', function(e){

 e.preventDefault(); // prevent form from submitting

 var $DATA = new FormData(this);

 $.ajax({

 type: 'POST',
 url: this.attr('action'),
 data: $DATA,
 cache: false,
 success: function(data){

         $thisDiv.empty();
         $thisDiv.append(data);
       }

    });

});

在你的 foobar.php

<?php

  $fname = $_POST['fname'];
  $lname = $_POST['lname'];

  $query = "SELECT * FROM people WHERE fname='$fname' AND lname = '$lname' ";
  $exec = $con->query($query);
 ...
 while($row = mysqli_fetch_array($query){
   echo $row['fname'] . " " . $row['lname'];
 }

?>

就是这样！希望对你有帮助

【讨论】：

【解决方案4】：

你可以使用 jQuery ajax 来完成它。

$('form').submit(function (e){
  e.preventDefault();
  $.ajax({
     type: "POST",
     url: url, //url where the form is to be submitted 
     data: data, //your data that is summited
     success: function () {
         // show the div 
      }

});


  });

【讨论】：

【解决方案5】：

是的，您可以混合使用 PHP 和 JavaScript。我在这里给你一个粗略的解决方案。

<?php

   if(try to catch submit button's post value here, to see form is submitted)
   {
      ?>
          <script>
              //do javascript tasks here
          </script>
      <?php
       //do php tasks here 

   }
?>

【讨论】：

【解决方案6】：

是的，这可能是 ajax 最大的用途。我会使用 jquery $.post

$("#myForm").submit(function(e){
  e.preventDefault();
  var val_1 = $("#val_1").val();
  var val_2 = $("#val_2").val();
  var val_3 = $("#val_3").val();
  var val_4 = $("#val_4").val();
  
  $.post("mydbInsertCode.php", {val_1:val_1, val_2:val_2, val_3: val_3, val_4:val_4}, function(response){
    // Form values are now available in php $_POST array in mydbInsertCode.php - put echo 'success'; after your php sql insert function in mydbInsertCode.php';
    if(response=='success'){
        myCheckdbFunction(val_1,val_2,val_3,val_4);
    }
  });
});

function myCheckdbFunction(val_1,val_2,val_3,val_4){

  $.post("mydbCheckUpdated.php", {val_1:val_1, val_2:val_2, val_3: val_3, val_4:val_4}, function(response){
    // put echo $val; from db SELECT in mydbSelectCode.php at end of file ';
    if(response==true){
        $('#myDiv').append(response);
    }
  });

}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：