发送表单数据用ajax

我要传递表单数据使用Ajax PHP和PHP中实现它来计算总和，分裂等运算方法，我是新来的AJAX调用努力学习，但是越来越多的要求，到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中）感谢您的帮助提前。

来源

2013-04-09 pinky

请查看当前的答案。确保你接受一个答案，以便其他人可以看到你的问题的正确答案，以防其他人有同样的问题。 – user1048676 2013-04-10 02:24:48

您可以使用AJAX简单。员额。看看下面的代码才能够达致这：

$('#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(); 
});

来源

2013-04-09 23:10:10 user1048676

有几件事你的代码错误;从细节到实际错误。

如果我们看一看的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>

与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中需要使用验证器）。

来源

2013-04-09 23:54:05

我修改了你的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; 

?>

来源

2013-04-09 23:57:44 Anam

你可以像下面通过在Ajax调用表单数据。 var formData = $（'＃client-form'）。serialize（）;

$阿贾克斯（{

网址： '？www.xyz.com/index.php' + FORMDATA，

类型： 'POST'，

数据：{

}，

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

错误：功能（数据）{}， }）

来源

2017-05-10 05:40:50 Jack

发送表单数据用ajax

回答

相关问题