如何在 WordPress 的外部可重用 javascript 文件中调用 jQuery.ajax？

Question

问题

我在文件add-cp-modal.js 中有一个名为dbInsertCostPlace(nameText) 的函数，该函数调用文件wpdb-helper.js 中名为dbInsertCostPlace(onSuccess, onError) 的另一个函数，该函数调用jQuery.ajax。但是，当它位于单独的文件wpdb-helper.js 中时，ajax 调用不起作用。 ajax 调用仅在与调用它的函数位于同一文件中时才有效。

文件

add-cp-modal.js，在wpdb-helper.js中调用ajax函数：

<div id="add-costplace-modal" class="add-costplace-modal-background">

    <div class="add-costplace-modal">

      <div class="add-costplace-modal-headerr">
        <div class="add-costplace-modal-headerr-left-box">
          Skapa kostnadsställe
        </div>
      </div>

      <div class="add-costplace-modal-body">

        <div class="add-costplace-modal-name-form">

          <div class="add-costplace-modal-name-form-label">
            Namn:
          </div>
          <input id="add-costplace-modal-name-textfield" type="text" class="add-costplace-modal-name-textfield">

        </div>

      </div>

      <div class="add-costplace-modal-footer">
        <button id="add-costplace-modal-save-button">Spara</button>
        <button id="add-costplace-modal-cancel-button">Avbryt</button>
      </div>

    </div>

  </div>

  <script>

    document.addEventListener('DOMContentLoaded', function () {
      addCpModal.init();
    }, false);

    var addCpModal = {

      init: function() {
        this.addButtonListeners();
      },

      addButtonListeners: function() {
        document.getElementById("add-costplace-modal-save-button").addEventListener("click", this.savePressed);
        document.getElementById("add-costplace-modal-cancel-button").addEventListener("click", this.cancelPressed);
      },

      savePressed: function() {
        var nameText = addCpModal.getNameText();
        addCpModal.dbInsertCostPlace(nameText);
        addCpModal.hide();
      },

      dbInsertCostPlace: function(nameText) {
        wpdbhelper.dbInsertCostPlace(addCpModal.onCostPlacePostSuccess, addCpModal.onCostPlacePostError);
      },

      onCostPlacePostSuccess: function(result) {
        alert("onCostPlacePostSuccess");
        addCpModal.loadCostPlaces();
      },

      loadCostPlaces: function(){
        wpdbhelper.loadCostPlaces(addCpModal.onCostPlacesGetSuccess, addCpModal.onCostPlacesGetError);
      },

      onCostPlacesGetSuccess: function(result) {
        alert("onCostPlacesGetSuccess");
        cpTable.setData(result);
      },

      onCostPlacesGetError: function(jqXHR, textStatus, errorThrown) {
        alert("Error occurred getting cost places.");
      },

      onCostPlacePostError: function(jqXHR, textStatus, errorThrown) {
        alert("Error occurred posting cost place.");
      },

      getNameText: function() {
        var nameTextfield = document.getElementById("add-costplace-modal-name-textfield");
        return nameTextfield.value;
      },

      hide: function() {
        var modal = document.getElementById("add-costplace-modal");
        modal.style["visibility"] = "hidden";
      },

      cancelPressed: function() {
        addCpModal.hide();
      },

      show: function() {
        var modal = document.getElementById("add-costplace-modal");
        modal.style["visibility"] = "visible";
      }

    };

</script>

wpdb-helper.js包含ajax调用函数：

<script>

  var wpdbhelper = {

    dbInsertCostPlace: function(onSuccess, onError) {
      console.log("wpdb-helper: ajaxurl: " + ajaxurl);
      jQuery.ajax({
        url : ajaxurl,
        type: 'POST',
        data: {
          'action': 'insert_costplace',
          'data': {
            'name': nameText,
            'age': 17
            }
        },
        success: function(result) {
          console.log("SUCCESS");
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log("ERROR");
        }
      });
      console.log("wpdb-helper: After ajax call.\n");
    },

    loadCostPlaces: function (onSuccess, onError){
        console.log("loadCostPlaces called inside wpdbhelper");
        jQuery.ajax({
          url : ajaxurl,
          type: 'POST',
          data: {
            action: 'get_costplaces'
          },
          dataType: 'json',
          success: function(result) {
            console.log("SUCCESS");
          },
          error: function(jqXHR, textStatus, errorThrown) {
            console.log("ERROR");
          }
        });
      }

  };

</script>

Answer 1

我发现了问题，现在感觉很傻。变量“nameText”未定义。我忘记将它作为参数传递给 wpdp-helper 方法。一旦我传入了 nameText 值，ajax 调用就起作用了。

Answer 2

基于这个简短（但很棒）article：

使用wp_enqueue_script("jquery");在页脚（而不是页眉）中包含您的 jQuery 定义

您还可以添加一个匿名范围（同样，在页脚中）以使用 $ 而不是 jQuery 使用：

(function($) {

    // $ Works! You can test it with next line if you like
    // console.log($);

})( jQuery ); 

这应该使 jQuery 在项目中的所有文件中可见