使用 jquery 时表单字段未发布到 php 文件答案

【问题标题】：form fields not getting posted to php file when using jquery使用 jquery 时表单字段未发布到 php 文件
【发布时间】：2013-03-28 19:53:33
【问题描述】：

我有一个包含两个字段的表单的 HTML 文件。这些字段的值应该发布到 PHP 中，并且这个 PHP 应该使用 JQuery 从 HTML 中获取。这是我实现的。

我的 HTML 文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
           $("button").click(function(){
                $("#first").load("result_jquery.php");
            });
        });     

    </script>
</head>
<body>
    <div id="first"></div>
    <div>
        <form method="POST" id="myForm">
        Name: <input type="text" name="name"/><br/>
        Number: <input type="text" name="number"/><br/>
        <button>submit</button>
        </form>
    </div>
</body>

这是我的 result_jquery.php

<?php
$n = $_POST["name"];
echo "hello ".$n;
?>

当我点击提交按钮时，hello 被打印出来了。但是这个名字没有被打印出来。你能帮我解决这个问题吗？我不知道我哪里错了。

【问题讨论】：

你试过用 ` 代替按钮吗？看起来它实际上并没有发送 POST 请求。
您加载页面，但从不在您的 Jquery 中向其发布任何信息。查看JQuery $.post 方法。 ^^
是的，我尝试了提交。它仍然无法正常工作。其实我观察到，即使去掉
标签，结果也是一样的。
我添加了以下内容。但它没有用。 `
我很抱歉代码缩进。我不知道为什么没有打印换行符。我是堆栈溢出的新手

标签： php jquery html

【解决方案1】：

我认为按钮元素的使用是令人担忧的，我现在将放置的代码可以根据您的需要正常工作，所以试试这个并告诉我结果:)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function(){
       $("#button").click(function(){
            var n = $('[name="namee"]').val();
            var nb = $('[name="number"]').val();
            $("#first").load("result_jquery.php",{'namee':n,'number':nb},function(data){});
        });
    });     

</script>
</head>
<body>
    <div id="first"></div>
    <div>
        <form method="POST" id="myForm">
            Name: <input type="text" name="namee"/><br/>
            Number: <input type="text" name="number"/><br/>
            <input type="button" value="Submit" id="button" />
        </form>
    </div>
</body>
</html>

【讨论】：

太棒了！我真的很感谢我的解决方案可以完美运行，并且可以满足您的需要:)如果您需要任何其他帮助，我就在这里 :)

【解决方案2】：

复制此代码：

<script type="text/javascript">
$(document).ready(function() {
    $("#send").click(function() {
        $.ajax({ 
            type: "POST", 
            data : "name="+$( '#name' ).val(),
            url: "result_jquery.php", 
            success: function(msg) {
                $('#first').html(msg);
            }
        }); 
    });
});
</script>

在表单中更改它

<form method="POST" id="myForm">
    Name: <input type="text" id="name" name="name"/><br/>
    Number: <input type="text" id="number" name="number"/><br/>
    <input type="button" id="send" value="Submit">
</form>

【讨论】：

我做到了。但是当我单击提交按钮时，除了刷新之外什么都没有发生，并且字段值消失了（因为刷新）
将更改为

【解决方案3】：

试试看然后告诉我结果:)

var n = $('[name="name"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'name':n,'number':nb},function(data){});

注意尝试将名称字段的元素名称从“name”更改为“namee”，并根据需要应用更改，如下所示：

var n = $('[name="namee"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'namee':n,'number':nb},function(data){});

还有 result_jquery.php 文件：

<?php
$n = $_POST["name"];
echo "hello ".$n;
?>

【讨论】：

当我使用
标签时，当我用 jquery 调用时，php 文件没有被加载。当我删除

标签时，它会被加载。但是表单字段没有通过。使用jquery时可以使用

标签吗？

【解决方案4】：

来自load 上的 jQuery 文档：

此方法是从服务器获取数据的最简单方法。这是大致相当于 $.get(url, data, success) 除了它是一个方法而不是全局函数，它有一个隐式回调功能。当检测到成功响应时（即当 textStatus 是“成功”或“未修改”），.load() 设置的 HTML 内容与返回数据匹配的元素。这意味着大多数使用方法可以很简单：

您正在使用该方法执行 HTTP GET，而不是 POST。

我的建议是，如果您想向服务器发送一个包含信息的 AJAX 请求，请习惯使用长格式的 jQuery AJAX：

$.ajax({
    data: 'url=encoded&query=string&of=data&or=object',
    url: 'path/to/server/script.php',
    success: function( output ) {
        // Handle response here
    }
});

有关更多信息，请参阅 jQuery 文档：http://api.jquery.com/jQuery.ajax/

【讨论】：

他们正在执行GET，但他们也不对该方法中的表单数据做任何事情，因此将PHP更改为$_GET根本没有帮助。
我添加了以下内容。但它没有用。 <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ type: "POST", // data : $(this).serialize(), data : "name", cache: false, url: "result_jquery.php", }); $("#first").load("result_jquery.php"); }); }); </script>
我很抱歉代码缩进。我不知道为什么没有打印换行符。我是堆栈溢出的新手
当我使用
标签时，当我用 jquery 调用时，php 文件没有被加载。当我删除

标签时，它会被加载。但是表单字段没有通过。
您的“数据”需要是一个 JSON 对象，其值从您的表单元素中提取，或者是一个 URL 编码的查询字符串（也包含您要发布到服务器的数据）