从表单发送数据并显示在另一个 div 和 jQuery ajax 中收到的数据

Question

我正在做一个小测试 php 页面，我想将带有无线电和复选框的表单提交到 process.php 然后结果将被发回并显示在 #content_result 在同一页面上刷新页面。我尝试使用 jQuery Ajax 但是当我点击提交时没有任何反应。

当我在 process.php 中更改一些东西时问题解决了:)

这是我的 index.php 代码：

<!Doctype HTML>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8"/>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>

<body>
        <form action="xuly.php" method="get" id="fil_form">
            <input type="radio" name="type" value="numberic" id="type_num"/><label>Numberic Type</label><br>
            <input type="radio" name="type" value="character" id="type_char"/><label>Character Type</label><br>
            <input type="checkbox" name="zerotonine" value="zero" id="check_zero"/><label>From 0 to 9</label><br>
            <input type="checkbox" name="evennumberic" value="even" id="check_even"/><label>Even Number</label><br>
            <input type="checkbox" name="oddnumberic" value="odd" id="check_odd "/><label>Odd Number</label><br>
            <input type="submit" name="submit_btn" id="submit_btn" value="Submit" />
        </form>
     <div id="content_result" style="margin-left:5px; width: 990px; min-height: 600px; border:1px solid #000; float:left;">
     </div>
     <script type="text/javascript">
     $(document).ready(function(){
   var formsubmit = $("#submit_btn"); 
     formsubmit.click(function(event){
      event.preventDefault();
    var data = $('form#fil_form').serialize();
    $.ajax({
       type : 'GET', 
       url : 'process.php', 
       data : data, 
       success : function(data)  
        { 
           $('#content_result').html(data); 
        }
       });
    });
  });
</script>    
</body>
</html>

这是我的 process.php 代码：

<?php
  if($_GET['type']=='numberic'){
   if(isset($_GET['zerotonine']) && ($_GET['zerotonine'])=='zero'){
    echo '0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9';
   }elseif(isset($_GET['evennumberic'])&&($_GET['evennumberic'])=='even'){
    echo '0 - 2 - 4 - 6 - 8';
   }elseif(isset($_GET['oddnumberic']) && ($_GET['oddnumberic'])=='odd'){
    echo '1 - 3 - 5 - 7 - 9';
   }
   else{
    echo '0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9<br>';
    echo '0 - 2 - 4 - 6 - 8<br>';
    echo '1 - 3 - 5 - 7 - 9<br>';
   }
  }elseif($_GET['type']=='charactic'){
   if(isset($_GET['zerotonine']) && ($_GET['zerotonine'])=='zero'){
    echo 'Zero - One - Two - ... - Eight - Nine';
   }elseif(isset($_GET['evennumberic'])&&($_GET['evennumberic'])=='even'){
    echo 'Zero - Two - Four - Six - Eight';
   }elseif(isset($_GET['oddnumberic']) && ($_GET['oddnumberic'])=='odd'){
    echo 'One - Three - Five - Seven - Nine';
   }
   else{
    echo 'Zero - One - Two - ... - Eight - Nine<br>';
    echo 'Zero - Two - Four - Six - Eight<br>';
    echo 'One - Three - Five - Seven - Nine<br>';
   }
  }
?>

这是我在点击提交按钮时得到的网络调试：

Answer 1

您的 JS 选择器中的表单 ID 不正确：

改变这个：

 var data = $('form#fil_form').serialize();

为此：

 var data = $('#fil_form').serialize();

这是我注意到的第一件事。如果还是不行，那就用forData()JS对象获取所有的表单元素。

Answer 2

通过添加print_r($_GET);

进行调试

<?php
 // if(isset($_GET['submit_btn'])){ // remove this !!!
  if($_GET['type']=='numberic'){
   if(isset($_GET['zerotonine'])){
    echo '0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9';
   }elseif(isset($_GET['evennumberic'])){
    echo '0 - 2 - 4 - 6 - 8';
   }elseif(isset($_GET['oddnumberic'])){
    echo '1 - 3 - 5 - 7 - 9';
   }
   else{
    echo '0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9<br>';
    echo '0 - 2 - 4 - 6 - 8<br>';
    echo '1 - 3 - 5 - 7 - 9<br>';
   }
  }elseif($_GET['type']=='charactic'){
   if(isset($_GET['zerotonine'])){
    echo 'Zero - One - Two - ... - Eight - Nine';
   }elseif(isset($_GET['evennumberic'])){
    echo 'Zero - Two - Four - Six - Eight';
   }elseif(isset($_GET['oddnumberic'])){
    echo 'One - Three - Five - Seven - Nine';
   }
   else{
    echo 'Zero - One - Two - ... - Eight - Nine<br>';
    echo 'Zero - Two - Four - Six - Eight<br>';
    echo 'One - Three - Five - Seven - Nine<br>';
   }
  }
// } // end of the if to remove 
    print_r($_GET); // TODO: remove when above cases are working
?>

Answer 3

您的 PHP 代码是正确的。

问题出在 JavaScript 代码上，当您提交表单时，$('form#fil_form').serialize() 没有包含提交按钮以及其他输入值。

在您的代码中，您做的第一件事是检查 submit_btn isset($_GET['submit_btn'])，但 submit_btn 未包含在数组中！

解决方案可能是以下之一，

不是测试 $_GET['submit_btn']，而是测试 GET 是否为空。

或

通过更改此代码将 submit_btn 输入添加到 GET 数组：

var data = $('form#fil_form').serialize();

收件人：

var data = $('#fil_form').serializeArray();

data.push({ name: 'submit_btn', value: 'submit_btn' });

从表单发送数据并显示在另一个 div 和 jQuery ajax 中收到的数据

Send data from form and show received in another div with jQuery ajax

html

php

ajax

jquery

fixed