Question

我有一个要求使用ajax将表单数据传递给php并在php中实现它来计算总和，除法和其他算术方法我是一个新的ajax调用试图学习但得到很多怀疑.... 如果有人帮我解决这个问题，那将会很有帮助

的index.html

<script type="text/javascript">
$(document).ready(function(){

  $("#submit_btn").click(function() {
         $.ajax({

      url: 'count.php',

    data: data,
        type: 'POST',
        processData: false,
        contentType: false,
        success: function (data) {
            alert('data');
        }
     })

});
    </script>
</head>

<form name="contact" id="form" method="post" action="">

      <label  for="FNO">Enter First no:</label>
      <input type="text" name="FNO" id="FNO" value=""  />
label for="SNO">SNO:</label>
                        <input type="text" name="SNO" id="SNO" value="" />

      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />

  </form>

在 count.php 我想实现

<?php
$FNO = ($_POST['FNO']);
$SNO=($_post['SNO']);


$output=$FNO+$SNO;
echo $output;

?>

（我想在count.php页面中显示不在第一页index.html中的输出）感谢您的帮助。

Answer 1

您可以在AJAX中使用简单的.post。看看下面的代码就可以实现这个目的：

$('#form').submit(function() {  
alert($(this).serialize()); // check to show that all form data is being submitted
$.post("count.php",$(this).serialize(),function(data){
    alert(data); //check to show that the calculation was successful                        
});
return false; // return false to stop the page submitting. You could have the form action set to the same PHP page so if people dont have JS on they can still use the form
});

这会将所有表单变量发送到序列化数组中的count.php。如果要在index.html上显示结果，此代码有效。

我在你问题的最底部看到你要在count.php上显示计数。那么你可能知道你可以简单地将count.php放入你的表单操作页面，这不需要AJAX。如果您真的想使用jQuery提交表单，可以执行以下操作，但是您需要在表单的操作字段中指定一个值：

$("#submit_btn").click(function() {
    $("#form").submit();
});

Answer 2

我修改了你的PHP代码，因为你在那里犯了一些错误。对于javscript代码，我已经为您编写了全新的代码。

<强>的index.html

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

</head>
<body>
<form name="contact" id="contactForm" method="post" action="count.php">

      <label  for="FNO">Enter First no:</label>
      <input type="text" name="FNO" id="FNO" value=""  />
<label for="SNO">SNO:</label>
                        <input type="text" name="SNO" id="SNO" value="" />

      <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />

  </form>

  <!-- The following div will use to display data from server -->
<div id="result"></div>
</body>


  <script>

  /* attach a submit handler to the form */
  $("#contactForm").submit(function(event) {
  /* stop form from submitting normally */  
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
  //Get the first value
  value1 = $form.find( 'input[name="SNO"]' ).val(),
  //get second value
  value2 = $form.find( 'input[name="FNO"]' ).val(),
  //get the url. action="count.php"
  url = $form.attr( 'action' );

  /* Send the data using post */
  var posting = $.post( url, { SNO: value1, FNO: value2 } );

  /* Put the results in a div */
  posting.done(function( data ) {

  $( "#result" ).empty().append( data );
  });
  });
  </script>
</html>

<强> count.php

<?php
$FNO =  $_POST['FNO'];
$SNO= $_POST['SNO'];


$output = $FNO + $SNO;
echo $output;

?>

Answer 3

您的代码存在一些问题;从细节到实际错误。

如果我们看一下Javascript那么它就行不通了。您可以使用变量data而无需进行设置。您需要打开浏览器的 Javascript控制台才能看到错误。谷歌吧。

此外，javascript比必要的更复杂。 Ajax请求有点特殊，而在这个例子中，您只需要设置两个POST变量。 jQuery.post()方法将为您提供更少的代码：

<script type="text/javascript">
$(document).ready(function(){
  $("#form").on("submit", function () {
    $.post("/count.php", $(this).serialize(), function (data) {
      alert(data);
    }, "text");
    return false;
  });
});
</script>

至于HTML，没关系，但我建议使用实际和简单的单词命名（即name=""）输入字段，而不是缩写，从长远来看，它将为您提供更好的服务。 / p>

<form method="post" action="/count.php" id="form">
  <label  for="number1">Enter First no:</label>
  <input type="number" name="number1" id="number1">
  <label for="number2">Enter Second no:</label>
  <input type="number" name="number2" id="number2">
  <input type="submit" value="Calculate">
</form>

与Javascript一样，PHP不起作用。与大多数编程语言一样，PHP对变量名称非常挑剔。换句话说，$_POST和$_post不是同一个变量！在PHP中，您需要使用$_POST来访问POST变量。

此外，您永远不应该信任您无法控制的数据，这基本上意味着来自外部的任何内容。您的PHP代码虽然可能不会造成太大的伤害（除了显示文件在文件系统中的位置，如果启用了错误），还应该清理并验证POST变量。这可以使用filter_input函数来完成。

<?php
$number1 = filter_input(INPUT_POST, 'number1', FILTER_SANITIZE_NUMBER_INT);
$number2 = filter_input(INPUT_POST, 'number2', FILTER_SANITIZE_NUMBER_INT);
if ( ! ctype_digit($number1) || ! ctype_digit($number2)) {
  echo 'Error';
} else {
  echo ($number1 + $number2);
}

总的来说，我会说你需要更加谨慎地编写代码。小错误（例如代码中的错误）可能导致所有内容崩溃。弄清楚如何检测错误（在jQuery中你需要使用控制台，在PHP中你需要打开错误信息，在HTML中你需要使用验证器）。

Answer 4

您可以执行以下操作，在ajax调用中传递表单数据。

var formData = $（＆＃39;＃client-form＆＃39;）。serialize（）;

$。AJAX（{

url：＆＃39; www.xyz.com/index.php？＆＃39; + formData，

键入：＆＃39; POST＆＃39;，

数据：{

}，

成功：功能（数据）{}，

错误：函数（数据）{}， }）

使用ajax将表单数据发送到php

4 个答案: