Question

我有一个表单将数据插入database.i使用ajax。使用特定按钮ajax无法正常工作我的代码下面的代码是工作代码的index.php

＆＃13;

$(document).on('click', '#formsubmit', function(e) {

  var data = $("#formjs").serialize();
  $.ajax({

    data: data,
    dataType: "JSON",
    type: "post",
    url: "datainsert.php",
    success: function(data) {
      if (data.success == "correct") {
        $('#error-msg').hide();
        $('#success-msg').show();
      } else {
        $('#success-msg').hide();
        $('#error-msg').show();
      }

    },

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" action="#" method="post" id="formjs">
  <div class="contct_InputRow form-group">
    <div class="col-sm-5">
      <label>Your Name</label>
    </div>
    <div class="col-sm-7">
      <input type="text" name="name" class="form-control spl_frm_font" required/>
    </div>
  </div>
  <div class="contct_InputRow1 form-group">
    <div class="paty_logo">
      <a href="#url"><img src="images/logo1.png" alt="" /></a>
    </div>
    <div class="avabl_btn">
      <input style="background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer;" type="button" name="submit" id="formsubmit" class="button submit" value="Send" />
      <br>

    </div>
    <label for="submit">Send<br>Message</label>
  </div>


  <div class="contct_InputRow1 form-group">
    <div class="paty_logo">
      <a href="#url"><img src="images/logo1.png" alt="" /></a>
    </div>
    <div class="avabl_btn">
      <input type='submit' name="submit" id='formsubmit' class="button submit" value='Send' />
      <label for="submit">Send<br>Message</label>
    </div>
  </div>

＆＃13;

这个按钮代码是否存在任何问题。仍然混淆了为什么它不起作用

Answer 1

如果您使用真实的提交输入（type="submit"），则需要在活动中使用preventDefault()，以便不提交表单，而是在活动中执行代码。

如果您的表单无法提交，则可能需要使用type="button"。

https://api.jquery.com/event.preventdefault/

Answer 2

像这样更改Javascritp

function test(){
    var data = $("#formjs").serialize(); $.ajax({ data: data, dataType: "JSON", type: "post", url: "datainsert.php", success: function(data){ if(data.success == "correct"){ $('#error-msg').hide(); $('#success-msg').show(); } else { $('#success-msg').hide(); $('#error-msg').show(); } }, }); }

** 2.改变这样的HTML **

<div class="contct_InputRow1 form-group"> <div class="paty_logo"><a href="#url"><img src="images/logo1.png" alt=""/></a></div> <div class="avabl_btn"> <button onClick = 'test()'>send msg </button></div> </div>

ajax不使用一种特定的输入类型

2 个答案: