时间戳

首页 > 解决方案 > 发多个帖子

javascript - 发多个帖子

问题描述

我的上述脚本有问题

我需要帮助，我想发布多个 ajax 帖子。我有两个 url 文件，我想在每个文件上发送请求

我想发送请求并得到响应

然后在成功调用上一个帖子之后自动发送其他帖子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! Site Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
  $(document).ready(function () {
    $("#Submit").click(function(event) {
       Execute();
       
    });

    function Execute(){
      $.ajax({
        type: 'POST',
        url: 'file1.php',
        data: { 'text': $("input[name='text']").val()
        },
         success: function(res) {
    $('#result_1').text(res.msg);
    
    // after success of provious post now make this post
    $.ajax({
        type: 'POST',
        url: 'file2.php',
        data: { 'text': $("input[name='text']").val()
        },
         success: function(res) {
    $('#result_2').text(res.msg);
  }
  
  // after success now reload some part of my html div1
  function update(){
    $('#div1').load("index.html #div1");
}
setInterval( function(){
   update();
}, 1000 );
  },
  
  // stop reload or div1 updating if url: 'file2.php', success msg eq to 'thanks'
  
        error: function() {
          alert("something went bad");
        }
      });
    };

  });
</script>

  </head>
  <body>
  <div id="div1">
    <h1 id="result_1"></h1>
    <h1 id="result_2"></h1>
    </div>
    <input type="button" id="Submit" value="Submit"/>
  </body>
</html>

标签： javascripthtmljqueryajax

解决方案

看起来您忘记dataType: 'json'在选项对象中提及 dataType:：

function Execute(){
    let inp = $("input[name='text']").val();
    $.ajax({
        type: 'POST',
        url: 'file1.php',
        dataType: 'json',
        data: { 'text': inp },
         success: function(res) {
    $('#result_1').text(res.msg);
    
    // after success of previous post now make this post:
    $.ajax({
        type: 'POST',
        url: 'file2.php',
        dataType: 'json',
        data: { 'text': inp },
         success: function(res) {
    $('#result_2').text(res.msg);
  }})}});
}

以下代码片段演示了两步 AJAX 操作。由于POST无法使用基于以下用途window.URL.createObjectURL()的此测试环境来执行。原理应该是一样的：$.get()GET

// for AJAX testing: mirror data back as a JSON string:
function echoURL(data) {
  return URL.createObjectURL(new Blob([JSON.stringify(data)],{type: "text/json"}));
}

$("#Submit").click(function(ev){
  $.ajax({type: 'GET', url: echoURL({msg:"first"}), dataType: 'json', 
         // data: { 'text': inp },
     success: function(res) { 
       $('#result_1').text(res.msg); 
       $.ajax({type: 'GET', url: echoURL({msg:"second"}), dataType: 'json', 
               // data: { 'text': inp },
         success: function(res) { 
           $('#result_2').text(res.msg); 
       }})
  }})
})
$('button').click(function(ev){$('h1').text("")})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
    <h1 id="result_1"></h1>
    <h1 id="result_2"></h1>
</div>
<input type="button" id="Submit" value="Submit"/>
<button>clear</button>

推荐阅读