Ajax 调用 PHP 函数 - 从 Wordpress 中的设置页面保存图片库

Question

有人可以给我一个很好的例子来说明如何使用 Ajax 调用 PHP 函数吗？我正在尝试将图片库（具有动态数量的图像）保存到管理设置部分的数据库中。下面的代码不完整或者可能有一些错误。请给我一个很好的例子或更好的方法：

<button type="button" class="btn btn-primary" onclick="jsAddSettingsFields()">Save Changes</button>

function jsAddSettingsFields(){

    var elements = document.getElementsByTagName("img");

    var urlsdata = new Array();

    for (var i = 0, element; element = elements[i++];) {

        if (elements[i].id == "idGalPic") {

            urlsdata[i] = elements[i].src; 

            // now we have all image urls in array, now need to 

            // call add_settings_fields

            var data = {

                action: 'php_addsettingsfields',

                p_urls: urlsdata //I think i need to JSON this

            };

            jQuery.post( "", function( data ) );

        }

    }

}//end of js function

<?php

    add_action( 'wp_ajax_update_options', 'php_addsettingsfields_callback' );

    add_action( 'wp_ajax_nopriv_update_options', 'php_addsettingsfields_callback' );

    function php_addsettingsfields_callback() {

        $pic_urls = $_POST['p_urls'];  // De-JSON-fy this variable

        foreach ($pic_urls as &$url) {

            add_settings_field($url);

        }

        add_settings_field(

            'pic_url_id', // ID - slug name of field

            '', // Title 

            array( $this, 'pic_gal_callback' ), // Callback

            'TestPlugin', // Page

            'setting_section_id' // Section ID - slug name of page         

        );   

        public function pic_gal_callback()  {

            <input type="hidden" id="idPic" name="idPic" value=$url />

        }

        // after all hidden fields(with gallery pic urls) are added to setting section submit 

        // the page and save the gallery urls to database

Answer 1

在这里看一下我的一个插件中的一个有效的 ajax 示例。Javascript 部分：//setting click event on button click to fire a function$('#YourButtonIdHere').click(function () {&nbsp; &nbsp; YourFunctionNameHere();});//function to executefunction YourFunctionNameHere() {&nbsp; &nbsp; //formdata variable consists of&nbsp; &nbsp; //action: this is ajax action name for WordPress which we define in PHP with a callback function with same name. See in PHP code part.&nbsp; &nbsp; //$('#YourFormIDHere').serialize();&nbsp; &nbsp; //this gets content from form and serialize it.&nbsp;&nbsp; &nbsp; var frm_data = "action=your_action_name_here&" + $('#YourFormIDHere').serialize();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; url: ajaxurl, // since WordPress version 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php&nbsp; &nbsp; &nbsp; &nbsp; data: frm_data,&nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; success: function(data, textStatus, jqXHR) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //do stuff here in case of success&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error: function(jqXHR, textStatus, errorThrown) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //do stuff here in case of error&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}PHP部分：&nbsp;//here wp_ajax is the required prefix for your custom actions&nbsp;//first parameter is action name with wp_ajax prefix&nbsp;//second parameter is callback function to execute with same name as your action&nbsp;//for example if your action name is wp_ajax_save_settings then your callback will be save_settingsadd_action( 'wp_ajax_your_action_name_here', 'your_action_name_here' );function your_action_name_here() {&nbsp; &nbsp; global $wpdb; // this is how you get access to the database&nbsp; &nbsp; //do stuff here and echo response&nbsp; &nbsp; echo "ajax call success";&nbsp; &nbsp; wp_die(); // this is required to terminate immediately and return a proper response}