1

我有这个代码，一旦单击按钮，就必须将数据发送到处理页面

<button id="whatever" onclick="sendData(); echoContent();">Send</button>

这是代码本身：

function echoContent() {
   $('#main_content').load('parts/echo.php');
}

function clearField() {
   document.getElementById("content_input").value='';
   document.getElementById("header_input").value='';
}
function sendData() {
   var header = jQuery('#header_input').val();
   var content = jQuery('#content_input').val();

   jQuery.ajax({
      type: 'POST',
      url: 'parts/addData.php',
      data: {
          header: header,
          content: content
      }
    });

    clearField();

}

页面加载后将更新，并且单击按钮后：

<div id="main_content"><script type="text/javascript"> echoContent(); </script></div>

按钮点击一次没有问题echoContent()，但第二次内容不刷新

也许函数的放置有错误？

4

3 回答 3

5

问题是jQuery.load()默认缓存你的调用，所以你需要使用.ajax()缓存选项，或者使用以下代码禁用全局ajax缓存：

$.ajaxSetup ({ cache: false });

在脚本开始时执行它，您的.load()调用将不会被缓存，并且每次调用它时都会看到更新的内容。

于 2013-04-26T14:47:24.190 回答
1

好的！，或者试试这个最佳代码：

<script type="text/javascript">

    function echoContent() {

        $.ajax({
            url: "parts/echo.php",
            type: 'GET',
            data: null,
            dataType: 'html',
            beforeSend: function () { 
                $('#main_content').html("Loading data...");
            },
            success: function (data) {
               $('#main_content').html(data);
            },
            complete: function () { 
            },
            error: function (error) {
                console.error(error);
            }
        });

    }

    function clearField() {

        $("#content_input").val(""); 
        $("#header_input").val("");

    }

    function sendData() {

     var header = $('#header_input').val(); 
     var content = $('#content_input').val(); 

     $.ajax({
            url: "parts/addData.php",
            type: 'POST',
            data: {
                header: header,
                content: content
            }, 
            beforeSend: function () {  
            },
            success: function (data) {
               if($.trim(data)){
                    clearField();
                    echoContent();
               }
            },
            complete: function () { 
            },
            error: function (error) {
                console.error(error);
            }
        });

    }  

$(function(){

    echoContent();

    $("#whatever").click(function(){
        sendData(); 
    });

});

</script>

<div id="main_content"></div>
<button id="whatever">Send</button>
于 2013-04-26T14:54:34.517 回答
-1

我可以看到有几件事情可能出错了。

首先，您的 sendData 函数是异步的。Javascript 解释器将立即继续调用 echoData 函数，而无需等待 sendData 中的 $.ajax 调用完成。更好的方法是从 $.ajax 中的成功处理程序调用 echoContent ，如下所示：

此外，您可能希望在 $.load 调用之前清除 #main_content 的内容：

function echoContent() {    
    $('#main_content')
        .html('') // clear it out
        .load('parts/echo.php');
}

function sendData() {
    var header = jQuery('#header_input').val();
    var content = jQuery('#content_input').val();

    jQuery.ajax({
        type: 'POST',
        url: 'parts/addData.php',
        data: {
            header: header,
            content: content
              }
         },
        success(response) {
            // Runs when addData.php is finished
            echoContent();
        });

      clearField();

   }
于 2013-04-26T14:47:27.793 回答