我希望我的 ajax 代码应该带有淡入淡出效果[关闭]

Question

这是我的html代码

  <input type="text" name="query_post" id="textid" />

 <input type="button" class="gbutton"  style="-webkit-user-select: none; opacity:1 " id="shareImageButton" value="Share" onclick="Postquery()">

    <div id="new_query_post">  
         </div>

css

 .new_query_post{

 display:inline;    

 }

js

    function Postquery() {


// 1. Create XHR instance - Start
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
    throw new Error("Ajax is not supported by this browser");
}
// 1. Create XHR instance - End

// 2. Define what to do when XHR feed you the response from the server - Start



xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status == 200 && xhr.status < 300) {
            document.getElementById('new_query_post').innerHTML = xhr.responseText;
        }

    }
}


// 2. Define what to do when XHR feed you the response from the server - Start

var textid = document.getElementById("textid").value;


// 3. Specify your action, location and Send to the server - Start 
xhr.open('POST', 'postquery.php');
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("textid=" + textid);
// 3. Specify your action, location and Send to the server - End
       }

php

<?php 


     $textid =trim($_POST["textid"]);

        echo"
    <div id='each_query'>

        <span style='margin-top:1%; margin-left:3%;float:left;color: #3bb598'>Jan 26'14 </span>
         <span style='margin-top:1%; margin-right:3%;float:right;color: #3bb598'>Hits : 39&nbsp;&nbsp; Views : 60</span>
         <br>
         <table><tr>
         <th><img src='propic/pro_pic.jpg' id='img' align='top'><br><span style='color:#3bb598'>Title</span>  <br><span style='color:#3bb598'><a href='' id='tagid'>Travel</a></span></th>
         <th></th><th></th><th></th>
         <th style='text-align: justify;color: #212121;'>".$textid."  
         </th><th></th><th></th><th></th>   
         </tr></table>
         </div>

                ";

     ?>

我希望新查询应该以淡入淡出效果发布，并且应该在发布之前显示一些 ajax 加载......

Answer 1

使用 jQuery 的帖子可能会更简单：

var jqXhr = function(e) {
  var $id = $('#textid').val();
  var $spinner = $('#spinner');
  var $result = $('#new_query_post');
  e.preventDefault();
  $result.fadeOut(200);
  $spinner.show();
  $.post('postquery.php', { textid: $id }, function(response) {
    $result.html(response).fadeIn(200);
    $spinner.hide();
  });
}
$('#shareImageButton').on('click', jqXhr);

并在您的 HTML 中添加 <div id="spinner">...</div>（您可以找到一些纯 CSS 微调器的示例 here）。