使用jQuery ajax从另一个div中的表单和show中发送数据

时间:2017-11-03 18:10:19

标签: php jquery html ajax fixed

我有一个小测试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>
&#13;
&#13;
&#13;

这是我的process.php代码:

&#13;
&#13;
<?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>';
			}
		}
?>
&#13;
&#13;
&#13;

这是点击提交按钮时获得的网络调试: enter image description here

3 个答案:

答案 0 :(得分:1)

您的PHP代码是正确的。

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

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

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

  1. 不测试$_GET['submit_btn'],而是测试GET是否为空。
  2. OR

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

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

      要:

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

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

答案 1 :(得分:0)

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

改变这个:

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

To This:

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

这是我注意到的第一件事。如果它仍然不起作用,那么使用forData() JS对象来获取所有表单元素。

答案 2 :(得分:0)

通过添加 cur.execute("SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME LIKE [{}]".format(tableName))

进行调试

&#13;
&#13;
print_r($_GET);
&#13;
&#13;
&#13;