通过 jquery 通过 post 请求发送按钮值答案

【问题标题】：Send button value by post request via jquery通过 jquery 通过 post 请求发送按钮值
【发布时间】：2017-05-05 00:02:56
【问题描述】：

我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form>
<button id="test" value="123" name="test" >ok</button>
</form>

<script>


 $(document).ready(function () {
          $("#test").click(function() {
                   var combinedData = $("#test").serialize();
                 $.post(
                        "element_submit.php",
                        combinedData
                 ).done(function(data) {
                        //alert("Successfully submitted!");
                        $("#result").html(data);
                 }).fail(function () {
                          //alert("Error submitting forms!");
                 })
          });
        });

</script>



<div id="result" ></div>

element_submit.php 文件

<?php 

//just to test it should output in the #result div 
echo $_POST['test'];

?>

我要做的是提交带有 value="attribute" 的以便数据被序列化并发送发布请求，这不像提交时用户插入一个值并提交，我需要的是获取值属性并提交给php，这段代码只是为了简化和说明我正在尝试做的事情，因为在这个页面中我有以下带有id的按钮#关注#unfollow，所以我需要一种方法来获取按钮值以使用户关注和取消关注。

【问题讨论】：

请参考此帖stackoverflow.com/questions/4007942/…
谢谢，很有用

标签： javascript php jquery ajax serialization

【解决方案1】：

您需要序列化表单 - 而不是其中的元素。您还可以在表单外部设置触发按钮，这将阻止表单在单击按钮时提交。

<form id="testForm">
   <input type="hidden" name="testInput" value="123"/>
</form>

 <button name="test" id="testButton">submit</button>
...

<script>
 $(document).ready(function () {
          $("#testButton").click(function() {
                   var combinedData = $("#testForm").serialize();...

 $(document).ready(function () {
    $("#testButton").click(function() {
        var combinedData = $("#testForm").serialize();
         console.log(combinedData);
      })
   })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
   <input type="hidden" value="123" name="testinput"/>
</form>
<button  id="testButton">Click</button>

【讨论】：

如果你使用 console.log(combinedData); 你会得到什么在您尝试发布之前？
输出全部空白
我需要表单内的按钮，因为点击后用户将关注或取消关注，因此点击的元素将通过帖子发送
答案已更新以在表单中输入 - 您可以将其作为隐藏值 - 因此触发按钮不需要在表单中 - 如果您不想看到它有 type = hidden - 这然后是所有 ajax 表单提交，我已经放置了一个控制台，登录那里显示结果 - 它可以工作
输出它工作的表单，但问题是我需要表单内的按钮，因为如果用户关注其他人，我的 php 会检查数据库，如果是这样，它会输出到带有 id=#following 的按钮，等如果表单不破坏 css，我会看到我能实现什么，感谢替代解决方案

【解决方案2】：

Straight JS 可能会帮助您。包括一个发送 id 并获取该 id 值的函数。然后只需发送一个没有序列化的常规值的帖子......更容易。

<script>
function fetchButtonValue(theId){
var p = document.getElementById(theId).value;
alert (p);
}
</script>

<button id="myFormBtn" value ="woo" 
onclick="fetchButtonValue(this.id)">My Button</button>

这行得通...

您也可以在按钮上放置一个类，例如 class="followBTN" 然后单击时您可以通过 $(this).val() 获取值如果我有多个，我会使用此方法每页按钮。

【讨论】：