javascript - Ajax Post 请求不起作用？-6ren

javascript - Ajax Post 请求不起作用？

转载作者：行者123 更新时间：2023-11-27 22:49:36

25

4

我正在尝试构建一个表单，用户在其中填写信息并单击提交。点击后，页面永远不会刷新。表单处理和数据处理将在用户点击后发生。

我正在尝试使用 jQuery 和 Ajax 来完成此任务，到目前为止，这就是我所拥有的:

HTML

<form class="article_information_form" action="" method="POST"> 
  <label>Title </label> 
  <input type="text" name="articleTitle"> <br> 
  <label>Article URL: </label> 
  <input type="text" name="articleUrl"> <br>
  <p>Number of pages</p>
  <select name="numPages">
    <option value="" selected></option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
  </select>
  <br>
  <?php echo $message;?> //For Debugging
  <input type="submit" name="article_info_btn" value="Submit">
</form>

PHP

if (isset($_POST["articleTitle"], $_POST["articleUrl"], $_POST["numPages"])) {
    $message = "Success!"; //For debugging
}

Ajax

$(document).on('submit', '.article_information_form', function(e) {
    e.preventDefault();
  $.ajax({
    type : 'POST', 
    url  : '', 
    success :  function(data) {
        alert("Success!"); 
    } 
  }) 
})

单击提交按钮后，将显示成功窗口弹出警报。不过，$message 变量永远不会打印出“成功!”这意味着它不处理 PHP $_POST。

如何让 Ajax 将信息发送到 PHP $_POST？

最佳答案

$( ".article_information_form" ).on( "submit", function( event ) {
  event.preventDefault();
  $.post(window.location , $( this ).serialize() , function(result){
        alert(result);
    });
});

您没有附加数据负载!!

由于您希望整个内容都在一个页面上，因此这将是一种可能的方式:

完整代码，易于理解:

<?php
//exececuted only if POST request as in the ajax below.
if($_SERVER[ 'REQUEST_METHOD']==='POST' ){
    //your processing here
    header( 'Content-Type: application/json');
    //lets set the receivedToServer property to what data we got
    $data = array();
    $data['receivedToServer'] = $_POST;
    //output data as json
    echo json_encode($data);
    //kill the page once the data is displayed
    die(); 
} 
?>
<!DOCTYPE html>
<html>
<head>
    <title>TEST</title>
</head>
<body>
    <form class="article_information_form" action="" method="POST">
        <label>Title </label>
        <input type="text" name="articleTitle">
        <br>
        <label>Article URL: </label>
        <input type="text" name="articleUrl">
        <br>
        <p>Number of pages</p>
        <select name="numPages">
            <option value="" selected></option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
        </select>
        <br>
        <input type="submit" name="article_info_btn" value="Submit">
    </form>
</body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
    $('.article_information_form').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '',
            data: $(this).serialize(),
            success: function(data) {
                //the processed data available as data variable. 
                //lets log the data received at server property we set before
                console.log(data.receivedToServer);
                alert(data.receivedToServer.articleTitle);
            }
        });
    })
</script>

</html>

关于javascript - Ajax Post 请求不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38168225/

25

4

0

文章推荐： c++ - 预编译器会评估位移位和算术运算吗？

文章推荐： css - 哈巴狗模板不包括样式表

文章推荐： c++ - QT 读取 JSON 文件并存储和检索值

文章推荐： css - 如何在没有左右间距的列之间创建空白？

python - Python 请求(AJAX 请求)数据丢失
我正在尝试从该网站抓取历史天气数据: http://www.hko.gov.hk/cis/dailyExtract_uc.htm?y=2016&m=1 在阅读了 AJAX 调用后，我发现请求数据的正确
rest - 链接 postman 请求 - 从另一个请求调用 postman 请求？
我有两个 postman 请求 x,y，它们命中了两个不同的休息 api X,Y 中的端点。 x 会给我一个身份验证 token ，这是发出 y 请求所必需的。如何在请求 y 中发出请求 x ？也就是
javascript - Node.js 请求 - 处理多个 POST 请求
我使用请求库通过 API 与其他服务器进行通信。但现在我需要同时发送多个(10 个或更多)POST 请求，并且只有在所有响应都正确的情况下才能进一步前进。通常语法看起来有点像这样: var optio
javascript - 如果提交了新的 AJAX 请求，则取消 AJAX 请求
背景:当用户单击按钮时，其类会在class1和class2之间切换，并且此数据是通过 AJAX 提交。为了确认此数据已保存，服务器使用 js 进行响应(更新按钮 HTML)。问题:如果用户点击按钮的
Node.js 请求 - 打印帖子的整个 http 请求(原始)
我正在将 Node.js 中的请求库用于 Google 的文本转语音 API。我想打印出正在发送的请求，如 python example . 这是我的代码: const request = requi
python - 请求、请求 2 和请求 3 之间有什么区别？
我经常使用requests。最近我发现还有一个 requests2 和即将到来的 requests3 虽然有一个 page其中简要提到了 requests3 中的内容，我一直无法确定 requests
python - 在 POST 请求(python 请求)后获取响应/返回值
我正在尝试将图像发送到我的 API，然后从中获取结果。例如，我使用发送一个 bmp 图像文件 file = {"img": open("img.bmp)} r = requests.post(url,
azure - Azure 中两个虚拟机之间的内部 HTTP 请求 - 默认情况下安全还是需要发送 HTTPS 请求？
我发现 Google Cloud 确保移出其物理环境的任何请求都经过强制加密，请参阅(虚拟机到虚拟机标题下的第 6 页)this link Azure(和 AWS)是否遵循类似的程序？如果有人能给我指
javascript - jQuery:执行同步 AJAX 请求，然后执行一系列其他 ajax 请求
我有一个 ASP.NET MVC 应用程序，我正在尝试在 javascript 函数中使用 jQuery 来创建一系列操作。该函数由三部分组成。我想做的是:如果满足某些条件，那么我想执行同步 jQu
javascript - Http 请求 - 外部 url 请求 ember js
我找不到如何执行 get http 请求，所以我希望你们能帮助我。这个想法是从外部url(例如 https://api.twitter.com/1.1/search/tweets.json?q=tw
android - 请求 READ_SMS 请求 "send and view SMS messages"
我的应用只需要使用“READ_SMS”权限。我的问题是，在 Android 6.0 上，当我需要使用新的权限系统时，它会要求用户“发送和查看短信”。这是我的代码: ActivityCompat.re
node.js - 为什么即使我的前端代码只是发出 POST 请求，浏览器也会发送 OPTIONS 请求？
我的前端代码: { this.searchInput = input; }}/> 搜索 // search method: const baseUrl = 'http://localho
c# - 将 HTTP 请求 header 添加到 WCF 请求
我有一个由 AJAX 和 C# 应用程序使用的 WCF 服务，我需要通过 HTTP 请求 header 发送一个参数。在我的 AJAX 上，我添加了以下内容并且它有效: $.ajax({
javascript - node.js + 请求 => node.js + bluebird + 请求
我正在尝试了解如何使用 promises 编写代码。请检查我的代码。这样对吗？ Node.js + 请求: request(url, function (error, response, body)
gwt - 如果失败，如何重新发送 GWT RPC 请求(或如何创建持久的 RPC 请求)？
如果失败(除 HTTP 200 之外的任何响应代码)，我需要重试发送 GWT RPC 请求。原因很复杂，所以我不会详细说明。到目前为止，我在同一个地方处理所有请求响应，如下所示: // We
php - 发起 POST 请求，执行操作，然后完成 POST 请求 - 如何？
当用户单击提交按钮时，我希望提交表单。然而，就在这种情况发生之前，我希望弹出一个窗口并让他们填写一些数据。一旦他们执行此操作并关闭该子窗口，我希望发出 POST 请求。这可能吗？如果可能的话如何？我
javascript - 什么更好？更多 HTTP 请求 = 更少的数据传输或更少的 HTTP 请求 = 更多的数据传输？
像 Facebook 这样的网站使用“延迟”加载 js。当你必须考虑到我有一台服务器，流量很大时。我很感兴趣 - 哪一个更好？当我一次执行更多 HTTP 请求时 - 页面加载速度较慢(由于限制(一
java - Servlet 容器创建 Servlet 请求/响应对象还是 HttpServlet 请求/响应对象？
Servlet 容器是否创建 ServletRequest 和 Response 对象或 Http 对象？如果是ServletRequest，谁在调用服务方法之前将其转换为HttpServletReq
php - HTTP 请求 URL 不是 HTTP 请求 header 的一部分吗？
这是维基百科文章的摘录: In contrast to the GET request method where only a URL and headers are sent to the serv
node.js - 首先完成一个 HTTP post 请求，然后再循环执行下一个 HTTP post 请求
我有一个循环，每次循环时都会发出 HTTP post 请求。 for(let i = 1; i console.log("succes at " + i), error => con

首页

博学

6Ren·AI

商城

javascript - Ajax Post 请求不起作用？