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更改为$fname，它应该“正常”

还要在{j} AJAX调用上添加.on()提交事件处理程序，如下所示：

$('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。

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

如果您将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;
?>

那应该适合你。

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

4 个答案: