Question

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

<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()功能没有问题，但第二次，内容不刷新

可能在功能放置方面有错误？

Answer 1

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

$.ajaxSetup ({ cache: false });

在脚本开始时执行该操作，您的.load()来电不会被缓存，每次调用时都会看到更新的内容。

Answer 2

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

<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>

Answer 3

我可以看到一些可能出错的事情。

首先，您的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();

   }

jQuery函数并不总是有效

3 个答案: