Javascript jQuery函数并不总是起作用

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

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

以及加载页面后要更新的，以及单击按钮后要更新的：

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

单击一次按钮后，echoContent功能没有问题，但第二次，内容不会刷新

---

函数的放置可能有错误？

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

$.ajaxSetup ({ cache: false }); 

---

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

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

$.ajaxSetup ({ cache: false }); 

---

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

我可以看到一些可能出现问题的地方

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

   }

---

我可以看出有几件事可能出了问题

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

   }

---

好的！，或者尝试以下最佳代码：

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

---

好的！，或者尝试以下最佳代码：

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

---

您应该使用$document.readyfunction{//functions}；表格是否意外提交？您是否希望echocontent加载刚刚发送的数据？ajax不能保证这一点。您应该使用$document.readyfunction{//Functions}；表格是否意外提交？您是否希望echocontent加载刚刚发送的数据？ajax不能保证这一点。