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 () {

    YourFunctionNameHere();

});

//function to execute

function YourFunctionNameHere() {

    //formdata variable consists of

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

    //$('#YourFormIDHere').serialize();    //this gets content from form and serialize it. 

    var frm_data = "action=your_action_name_here&" + $('#YourFormIDHere').serialize();

    $.ajax({

        type: "POST",

        url: ajaxurl, // since WordPress version 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php

        data: frm_data,

        cache: false,

        success: function(data, textStatus, jqXHR) {

            //do stuff here in case of success

        },

        error: function(jqXHR, textStatus, errorThrown) {

            //do stuff here in case of error

        }

    });

}

PHP部分：

 //here wp_ajax is the required prefix for your custom actions

 //first parameter is action name with wp_ajax prefix

 //second parameter is callback function to execute with same name as your action

 //for example if your action name is wp_ajax_save_settings then your callback will be save_settings

add_action( 'wp_ajax_your_action_name_here', 'your_action_name_here' );

function your_action_name_here() {

    global $wpdb; // this is how you get access to the database

    //do stuff here and echo response

    echo "ajax call success";

    wp_die(); // this is required to terminate immediately and return a proper response

}