Question

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

所以，我把

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

on

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

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

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

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 CODE

<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>

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

Answer 1

请参阅 http://api.jquery.com/serialize/

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

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

使用提交处理程序

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

});

Answer 2

加载页面时生成$_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();
    }
});

Answer 3

您已经拥有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 }

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

等$_POST['subheadline']来访问它

Answer 4

使用Firebug的控制台功能，您可以看到服务器对您的AJAX调用的响应。响应是按照你想要的那样评估$ _POST var，但是由于AJAX调用发生在幕后，你没有看到它。

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

将<? echo $_POST['headline']; ?>替换为<span id="yourheadline"><span>
在$('#yourheadline').html(headline);

$(".save-notice").show();

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

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

...将完成同样的事情：

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

将变量从Javascript / JQuery传递给PHP

4 个答案: