0

我需要使用 ajax 将表单数据传递给 php 并在 php 中实现以计算总和、除法和其他算术方法如果有人帮我解决这个问题

索引.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 中显示输出）提前感谢您的帮助。

4

4 回答 4

2

您可以使用带有 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 提交表单，您可以执行以下操作，但您需要在表单的 action 字段中指定一个值：

$("#submit_btn").click(function() {
    $("#form").submit();
});
于 2013-04-09T23:10:10.750 回答
2

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

索引.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>

计数.php

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


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

?>
于 2013-04-09T23:57:44.987 回答
1

您的代码有一些问题；从细节到实际错误。

如果我们看一下 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=""使用实际和简单的单词命名（即）输入字段，而不是缩写，从长远来看，这将为您提供更好的服务。

<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>

PHP 与 Javascript 一样，只是不起作用。与大多数编程语言一样，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 中您需要使用验证器）。

于 2013-04-09T23:54:05.857 回答
0

您可以像下面那样在 ajax 调用中传递表单数据。

var formData = $('#client-form').serialize();

$.ajax({

网址：'www.xyz.com/index.php?' + 表格数据，

类型：'POST'，

数据：{

},

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

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

于 2017-05-10T05:40:50.737 回答