html表单使用php和ajax提交

时间:2018-07-08 08:09:33

标签: php jquery html ajax

试图将简单的电子邮件数据从网站存储到mysql数据库中,我已经编写了代码,但是它不起作用,我无法弄清

 <form class="subfield">
            <input type="text" id="emailInput" name="email" type='email' placeholder="Enter Your Email here" required>
            <input type="submit" id="inputSubmit" value="Subscribe">
            <span id="st">Email Subscribed!</span>

        </form>

<script type="text/javascript">

    $(document).ready(function(){  
  $('#inputSubmit').click(function(){ 
      var email = $('#emailInput').val();
            $.ajax({  
                 url:"form_process.php",  
                 method:"POST",  
                 data:{email:email},  
                 success:function(data){  
                      $("form").trigger("reset");  
                      $('#st').fadeIn().html(data);  
                      setTimeout(function(){  
                           $('#st').fadeOut("Slow");  
                      }, 2000);  
                 } 
            });  

  });  
  });  
  </script>


<?php  


//insert.php  
 $connect = mysqli_connect("localhost", "root", "", "testing");  
 if(isset($_POST["email"]))  
 {  
      $email = mysqli_real_escape_string($connect, $_POST["email"]);   
      $sql = "INSERT INTO `emails_list`(`email`) VALUES ('".$email."')"; 
      if(mysqli_query($connect, $sql))  
      {  
           echo "email Subscribed";  
      }  
 }   
 ?>

当单击“提交”按钮时,它会重定向到主页,URL也显示?email =部分,但是数据库中没有存储任何数据,似乎也没有从php发送回声

编辑:我注意到文件另存为index.php而不是index.html,是否有必要另存为index.php

3 个答案:

答案 0 :(得分:2)

可能是防止浏览器动作不正常的方法。然后在提交时调用ajax请求。

bool IsSystemCodeIntegrityEnabled() {
        typedef NTSTATUS(__stdcall* td_NtQuerySystemInformation)(
                ULONG           SystemInformationClass,
                PVOID           SystemInformation,
                ULONG           SystemInformationLength,
                PULONG          ReturnLength
                );

        struct SYSTEM_CODEINTEGRITY_INFORMATION {
                ULONG Length;
                ULONG CodeIntegrityOptions;
        };

        static td_NtQuerySystemInformation NtQuerySystemInformation = (td_NtQuerySystemInformation)GetProcAddress(GetModuleHandleA("ntdll.dll"), "NtQuerySystemInformation");

        SYSTEM_CODEINTEGRITY_INFORMATION Integrity ={ sizeof(SYSTEM_CODEINTEGRITY_INFORMATION), 0 };
        NTSTATUS status = NtQuerySystemInformation(103, &Integrity, sizeof(Integrity), NULL);

        return (NT_SUCCESS(status) && (Integrity.CodeIntegrityOptions & 1));
}

答案 1 :(得分:0)

您可以做两件事:

使用按钮代替提交

此:

 <input type="submit" id="inputSubmit" value="Subscribe">

收件人:

<input type="button" id="inputSubmit" value="Subscribe">

使用preventDefault方法

$(document).ready(function() {
  $("#inputSubmit").click(function(e) {
    e.preventDefault();
    var email = $("#emailInput").val();
    $.ajax({
      url: "form_process.php",
      method: "POST",
      data: { email: email },
      success: function(data) {
        $("form").trigger("reset");
        $("#st")
          .fadeIn()
          .html(data);
        setTimeout(function() {
          $("#st").fadeOut("Slow");
        }, 2000);
      }
    });
  });
});

答案 2 :(得分:0)

$(document).ready(function(){ 
     $('#inputSubmit').click(function(e){ 
          e.preventdefault();
          var email = $('#emailInput').val();       
          $.ajax({
                  url:"form_process.php",    
                  method:"POST",
                  data:{email:email},      
                  success:function(data){
                       $("form").trigger("reset");
                       $('#st').fadeIn().html(data);    
                       setTimeout(function(){
                            $('#st').fadeOut("Slow");
                       }, 2000);
                  }
           });
           return false;
      });
});