1

我还是 JQuery 的新手，正在尝试学习如何在不刷新页面的情况下提交表单......我想要的是，当提交表单时，我在“标题”和“副标题”上键入的值可以传递到php 变量（所以我可以回显/插入数据到数据库等）

所以，我把

"<? echo $_POST['headline']; ?>"

上

<span class="save-notice">Your change has been saved! <? echo $_POST['headline']; ?></span>

但是当我填写表格并单击提交按钮时，它只显示“您的更改已保存！”。这意味着，该变量不能传递给 PHP。

HTML 和 JS 合并为 1 个文件。我将 URL 方法保留在 .ajax 上，因为它是在同一个文件中处理的。

HTML 表格

<div id="submit-form">
<form action="" id="select-block" class="general-form">
<div class="input-wrap">
    <input class="clearme" name="Headline" value="Your headline here" id="headline"/>
</div>
<div class="input-wrap">
    <textarea class="clearme" name="Sub-Headline" id="subheadline">Sub Headline Here</textarea>
</div>

<input type="submit" class="submit-btn" value="SAVE" />
<span class="save-notice">Your change has been saved! <? echo $_POST['headline']; ?></span>
</form>
</div>

和 JQUERY 代码

<script type="text/javascript">

$(function() {  
  $(".save-notice").hide();
  $(".submit-btn").click(function() {  

    var headline = $("input#headline").val();
    var subheadline = $("textarea#subheadline").val();
    var dataString = 'headline='+ headline + '&subheadline=' + subheadline;
    alert(dataString)


        $(".save-notice").hide();
        $.ajax({  
        type: "POST",  
        url: "",
        data: dataString,
        success: function() {  
            $(".save-notice").show();
        }  
    });  
return false;  
  });  
});  

</script>

如果可以这样做，我在互联网上的几个示例/教程中看到了。你能建议吗？

4

4 回答 4

2

见 http://api.jquery.com/serialize/

而不是将代码添加到单击处理程序

$(".submit-btn").click(function() { ...  }

使用提交处理程序

$("#select-block").submit(function() {  
// your code
  var dataString = $(this).serialize();

});
于 2012-10-30T18:05:04.550 回答
0

在$_POST['headline']你save-notice的页面加载时生成。PHP 运行，并输出一个 HTML 文件。

当您发出 AJAX 请求时，返回到 AJAX 调用的页面将包含您的新值，但您的当前页面不包含。

您可以发布到不同的页面，让该页面返回一个值，然后使用 JavaScript 更改 div 的值。

或者，您可以尝试从返回的 HTML 页面中提取数据。

$(".save-notice").hide();
$.ajax({
    type: "POST",
    url: "",
    data: dataString,
    dataType: 'html', // the page returned
    success: function(data) {
        // get the data from the returned page
        $(".save-notice").html($('.save-notice', data).html());
        $(".save-notice").show();
    }
});
于 2012-10-30T17:59:30.930 回答
0

您已经拥有 javascript 变量中的值：

var headline = $("input#headline").val();
var subheadline = $("textarea#subheadline").val();

你可以这样做：

$.ajax({
    type: "POST",
    url: "foo.php",
    data: {headline: headline, subheadline: subheadline},
        success: function() {
            $(".save-notice").show();
        }
});

或像这样：

$.post("foo.php", { headline: headline, subheadline: subheadline }, 
    function(data) {
        $(".save-notice").show();
    }
);

可以看到，数据是在键值对中传递的： { headline: headline, subheadline: subheadline }

您可以使用$_POSTlike$_POST['headline']和$_POST['subheadline']

于 2012-10-30T18:13:41.883 回答
0

使用 Firebug 的控制台功能，您可以看到服务器对您的 AJAX 调用的响应。响应正在评估 $_POST 变量，就像您希望的那样，但由于 AJAX 调用发生在幕后，您看不到它。

要使您的脚本无需太多修改即可运行，请尝试以下操作（无需 PHP）：

  1. 替换<? echo $_POST['headline']; ?>为<span id="yourheadline"><span>
  2. $('#yourheadline').html(headline);在前一行插入$(".save-notice").show();

我建议的另一件事是序列化您的表单以创建 dataString var，而不是通过输入进行输入。如果您的输入被命名为headlineandsubheadline而不是Headlineand Sub-Headline... 

var dataString = $("#select-block").serialize();

...将完成与以下相同的事情：

var headline = $("input#headline").val();
var subheadline = $("textarea#subheadline").val();
var dataString = 'headline='+ headline + '&subheadline=' + subheadline;
于 2012-10-30T18:42:16.340 回答