根据是否提交表单或单击 div 通过 AJAX 调用发送不同的数据答案

【问题标题】：Send different data through AJAX call depending on if form was submitted or div was clicked根据是否提交表单或单击 div 通过 AJAX 调用发送不同的数据
【发布时间】：2017-12-05 09:47:48
【问题描述】：

我有一个名为 search 的函数，它通过单击 div 或提交表单来调用。

当点击 div 时，它的 id 通过 AJAX 调用作为数据发送。但是我想要做的是，如果提交表单，通过 AJAX 调用发送输入的数据。

我想过有两个函数和 AJAX 调用，但我觉得这是不必要的，必须有一个简单的解决方案。

<div id="12" class="question"></div>
<div id="24" class="question"></div>
<div id="11" class="question"></div>

<form id="question" method="post">
<input type="text" name="enter" id="enter">
<input type="submit">
</form>

<script>
$(".question").click(search);
$("form#question").submit(search);

function search() {
   $.ajax({
      type: "POST",
      url: "sending.php",
      data: "example=" + this.id,
      success: function(data) {
         console.log(data);
      }
   });
}
</script>

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

您可以使用is 函数检查您点击的内容：

var isDiv = $( this ).is( "div" );
// or 
// var isForm = $( this ).is( "form" );

然后决定发送什么：

data: isDiv ? ("example=" + this.id) : $( this ).serialize(),

简化：

data: $( this ).is( "div" ) ? ("example=" + this.id) : $( this ).serialize(),

【讨论】：

我在理解这一点时遇到了一些麻烦。如果不是 div，我将如何获取输入文本的值？
serialize() 函数将所有表单的输入序列化为字符串。您可以将输入重命名为example，序列化字符串将为example=VALUE OF INPUT

【解决方案2】：

我添加的第一件事是event.preventDefault();，以确保 HTML 页面保留在浏览器中，即使按下按钮提交。

使用var enter = $("form#question input#enter").val(); 可以检索字段enter 的值。如果单击 div，则值为 null。

在 ajax 调用中，我使用带有字段 id 和 name 的 javascript-object 并将其用作数据参数。

请注意，您应该将 javascript 代码放在单独的文件中。避免使用内联 javascript 可以更轻松地防止 XSS。阅读1 和2。

See Plunker

$(document).ready(function() {

$(".question").click(search);
$("form#question").submit(search);

function search(event) {

  // prevents form submission
  event.preventDefault();

  var id = this.id;
  var enter = $("form#question input#enter").val();

   $.ajax({
      type: "POST",
      url: "sending.php",
      data: {
        'id': id,
        'enter': enter
      },
      success: function(data) {
         console.log(data);
      }
   });
}

});

【讨论】：

【解决方案3】：

试试这个，这将帮助你确定

<div id="12" class="question">12</div>
<div id="24" class="question">24</div>
<div id="11" class="question">11</div>

<form id="question" method="post">
    <input type="text" name="enter" id="enter">
    <input type="submit">
</form>

<script>
    $(document).on('click','.question',function(){
        console.log($("input[name='enter']").val($(this).attr('id')));
        $("#question").submit();
    });
</script>

【讨论】：