Question

我有一个名为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>

Answer 1

您可以使用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(),

简化为：

<app-object #obj></app-object>
<app-event [data]="obj.data"=></app-event>

Answer 2

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

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

在ajax-call中，我使用带有 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);
      }
   });
}

});

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

通过AJAX调用发送不同的数据，具体取决于是否提交了表单或单击了div

3 个答案: