时间戳

首页 > 解决方案 > jQuery Ajax post 无法发送数据

jquery - jQuery Ajax post 无法发送数据

问题描述

我有 HTML 表单，将数据发送到本地 PHPscript，并通过 jQuery 发送到远程 php。问题是我无法将数据发送到我的远程 PHP，为此我尝试使用 jQuery Ajax。

html代码：

<!DOCTYPE HTML>  
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='e.js'></script>
<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field</span></p>
<form method="post" id="registration" action="function.php">  
  Name: <input type="text" id="nameq" name="name" value="">
  <span class="error">* </span>
  <br><br>
  E-mail: <input type="text" id="email" name="email" value="">
  <span class="error">* </span>
  <br><br>
  Website: <input type="text" id="website" name="website" value="">
  <br><br>
  Comment: <textarea id="comment" name="comment" rows="5" cols="40"></textarea>
  <br><br>
  Gender:
  <input type="radio" id="gender" name="gender" value="female">Female
  <input type="radio" id="gender" name="gender" value="male">Male
  <input type="radio" id="gender" name="gender" value="other">Other  
  <span class="error">* </span>
  <br><br>
  <button id="button" type="submit" form="registration">Submit</button>
</form>
</html>

e.js：

$(document).ready(function() {
    $("#button").click(function() {
        var cln = $("#nameq").val();
        $.post("https://test/index.php", {"cln": cln});
    });
});
  1. 如果$("#button").click(function() Mozilla Firefox 68 显示“NS_BINDING_ABORTED”，则 Chrome 76 无法发送
  2. 如果$("#button").submit(function() Mozilla Firefox 什么也没显示，无法发送，Chrome 无法发送
  3. 有解决方案$.ajaxSetup({async: false})两个浏览器都可以正常工作，但我不想使用它

我做错了什么，有没有只改变e.js的解决方案？谢谢

标签： jquery

解决方案

欢迎来到 Stackoverflow！

在您的情况下发生的事情是<button type="submit">在您的点击事件被调用之前提交表单。每当提交表单时，您都需要在触发该 get 时使用jQuery submit事件

$( document ).ready(function() {
    $("#registration").submit(function( event ) {
        event.preventDefault();
        var url = $(this).attr('action');
        var cln = $("#nameq").val();
        $.post(url, {"cln": cln});
    });
});

这里，关键是方法调用event.preventDefault()。

从文档中引用

jQuery 的提交事件在实际提交之前触发，因此我们可以通过对事件对象的此调用取消提交事件。

推荐阅读