使用$ .ajax请求将数据发送到服务器

Question

我有2个输入的简单形式：

<form name="contact" id="contact">
<input type="text" id="firstName" name="firstName"/>
<input type="text" id="lastName" name="lastName"/>
<input type="submit" value="Send"/>
</form>

在提交时，我想使用jQuery ajax方法将数据发送到print.php。 代码如下：

var contact=$("#contact");

contact.on("submit",function(event){
  var firstName=$("#firstName").val();
  var lastName=$("#firstName").val();

  $.ajax({
        type:"POST",
        url:"print.php",
        dataType:"json",
        data:{
             fname:firstName,
             lname:lastName
        }               
  });
 });        

我希望Print.php脚本仅打印发送的数据，但是什么也没有发生。 脚本如下：

<?php
$fname = $_POST['fname'];
$lname=$_POST['lname'];

echo $fname;
?>

问题在print.php中很明显。

Answer 1

您需要使用以下内容。

$("form").submit(function(event) {

  event.preventDefault();
  $.ajax({
    type: "POST",
    url: "print.php",
    dataType: "json",
    data: {
      fname: firstName,
      lname: lastName
    },
    success: functon(dt) {
      alert(dt);
    }
  });
});

Answer 2

任何地方都没有$subject变量。

您可以正确设置名字和姓氏变量。

要检查脚本的响应（这将是一个错误），请转到控制台并检查网络，然后答复数据。

将$subject更改$subject $fname ，它应该“起作用”

还要添加.on()提交事件处理程序到jQuery AJAX调用，如下所示：

$('form').on('submit', function() {
    //ajax call
});

编辑：

您进行了修改，将$subject更改为$name 。 也没有$name变量。

Answer 3

您不需要ajax表单上的JSON类型。 并包含preventDefault以避免自然动作（提交时页面刷新）

contact.on("submit",function(event){
  var firstName=$("#firstName").val();
  var lastName=$("#firstName").val();

  event.preventDefault();

  $.ajax({
    type:"POST",
    url:"print.php",
    data:{
         fname:firstName,
         lname:lastName
    }               
  });
});

Answer 4

看来您的问题是您的HTML表单不知道要提交的地方，这就是为什么什么也没有发生的原因。 您需要告诉HTML表单运行javascript。

您可以使用http://api.jquery.com/submit/上的 JQuery的.submit（）方法文档将HTML表单链接到javascript。

如果将所有javascript包装起来，则一旦提交，它将触发您的javascript运行。

$("form").submit(function( event ) {

    var firstName=$("#firstName").val();
    var lastName=$("#firstName").val();

    $.ajax({
            type:"POST",
            url:"print.php",
            dataType:"json",
            data:{
                 fname:firstName,
                 lname:lastName
            }               
    }); 

});

另外，您可以给HTML表单一个动作，以便它知道提交表单后该怎么做。

下面我们说提交此表单时运行myFunction（），然后我们需要将所有JavaScript包装在myFunction（）中。

<form name="contact" action=“javascript:myFunction();”>
    <input type="text" id="firstName" name="firstName"/>
    <input type="text" id="lastName" name="lastName"/>
    <input type="submit" value="Send"/>
</form>

您的JavaScript看起来像这样

function myFunction(){

    var firstName=$("#firstName").val();
    var lastName=$("#firstName").val();

    $.ajax({
            type:"POST",
            url:"print.php",
            dataType:"json",
            data:{
                 fname:firstName,
                 lname:lastName
            }               
    });

}

一旦达到目标，您将要修复您的php。 现在您拥有它的方式$ name为空，不会打印任何内容。 您需要先填充变量，然后再将其回显。 我假设您希望$ name包含$ fname和$ lname的串联版本。

<?php
    $fname = $_POST['fname'];
    $lname=$_POST['lname'];

    $name =  $fname . ' ' . $lname;

    echo $name;
?>

那应该为您工作。