{"id":12797,"date":"2022-01-11T15:24:16","date_gmt":"2022-01-11T07:24:16","guid":{"rendered":"https:\/\/fgchen.com\/wpedu\/?p=12797"},"modified":"2026-03-28T22:00:22","modified_gmt":"2026-03-28T14:00:22","slug":"%e3%80%90wordpress%e3%80%91ajax%e7%af%84%e4%be%8b","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2022\/01\/%e3%80%90wordpress%e3%80%91ajax%e7%af%84%e4%be%8b\/","title":{"rendered":"\u3010WordPress\u3011AJAX\u7bc4\u4f8b"},"content":{"rendered":"\u7bc4\u4f8b\u4f86\u81ea\u65bc\uff1a<a href=\"https:\/\/shellcreeper.com\/wp-ajax-for-beginners\/\" target=\"_blank\" rel=\"noopener\">WordPress AJAX for Beginners<\/a>.\r\n\r\n\u9019\u500b\u7bc4\u4f8b\u8a3b\u518a\u4e00\u500b\u77ed\u78bc\u51fd\u5f0f\uff0c\u5728\u4e00\u500b\u6587\u7ae0\u6216\u9801\u9762\u4e2d\uff0c\u63d2\u5165\u9019\u500b\u8a3b\u518a\u7684\u77ed\u78bc\u4f86\u53d6\u5f97\u5f9e\u524d\u7aef\u50b3\u4f86\u7684\u8cc7\u6599\u3002\r\n\r\n\u5f9e\u9019\u500b\u7bc4\u4f8b\u53ef\u4ee5\u5b78\u5230\u4e8c\u4ef6\u4e8b\uff1a\r\n<ul>\r\n \t<li>\u5982\u4f55\u64b0\u5beb\u3001\u8a3b\u518a\u3001\u4f7f\u7528\u4e00\u500b\u77ed\u78bc\u51fd\u5f0f\u3002<\/li>\r\n \t<li>\u5982\u4f55\u4f7f\u7528AJAX\u5c07\u524d\u7aef\u7684\u8cc7\u6599\u50b3\u9001\u81f3\u5f8c\u7aef\u3002<\/li>\r\n<\/ul>\r\n\u77ed\u78bc\u662fWordPress\u88cf\u7684\u91cd\u8981\u6a5f\u5236\uff0c\u53ef\u4ee5\u5728\u4e00\u500b\u975c\u614b\u7684\u9801\u9762\u6216\u6587\u7ae0\u63d2\u5165\u4e00\u500b\u77ed\u78bc\uff0c\u9019\u500b\u77ed\u78bc\u6703\u547c\u53eb\u7d81\u5b9a\u7684\u77ed\u78bc\u51fd\u5f0f\uff0c\u5f9e\u77ed\u78bc\u51fd\u5f0f\u50b3\u56de\u7d50\u679c\u3002\u5728\u9801\u9762\u6216\u6587\u7ae0\u4e2d\u63d2\u5165\u77ed\u78bc\u7684\u76ee\u7684\u662f\u8981\u547c\u53eb\u51fd\u5f0f\uff0c\u900f\u904e\u51fd\u5f0f\u7684\u7a0b\u5f0f\u80fd\u529b\uff0c\u7d93\u904e\u8a08\u7b97\u53d6\u5f97\u6240\u8981\u7684\u8cc7\u6599\uff0c\u5c31\u5982\u540c\u5728\u7a0b\u5f0f\u547c\u53eb\u51fd\u5f0f\u4e00\u822c\u3002\r\n<h2 id=\"blob-path\" class=\"breadcrumb flex-auto flex-self-center min-width-0 text-normal mx-2 width-full width-md-auto flex-order-1 flex-md-order-none mt-3 mt-md-0\"><strong class=\"final-path\">wp-ajax-noob.php<\/strong><\/h2>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">&lt;?php\r\n\/**\r\n * Plugin Name: WordPress AJAX Example for Beginners\r\n * Plugin URI: https:\/\/shellcreeper.com\/wp-ajax-for-beginners\/\r\n * Description: Example plugin from tutorial \"WordPress AJAX for Beginners\"\r\n * Version: 1.0.0\r\n * Author: David Chandra Purnama\r\n * Author URI: https:\/\/shellcreeper.com\/\r\n * License: GPLv2 or later\r\n * License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.txt\r\n * Text Domain: wp-ajax-noob\r\n * Domain Path: \/languages\/\r\n *\r\n * @author David Chandra Purnama &lt;david@genbumedia.com&gt;\r\n * @copyright Copyright (c) 2016, Genbu Media\r\n**\/\r\nif ( ! defined( 'WPINC' ) ) { die; }\r\n\r\n\r\n\/* 1. REGISTER SHORTCODE\r\n------------------------------------------ *\/\r\n\r\n\/* Init Hook *\/\r\nadd_action( 'init', 'my_wp_ajax_noob_plugin_init', 10 );\r\n\r\n\/**\r\n * Init Hook to Register Shortcode.\r\n * @since 1.0.0\r\n *\/\r\nfunction my_wp_ajax_noob_plugin_init(){\r\n\r\n    \/* Register Shortcode *\/\r\n    add_shortcode( 'john-cena', 'my_wp_ajax_noob_john_cena_shortcode_callback' );\r\n\r\n}\r\n\r\n\/**\r\n * Shortcode Callback\r\n * Just display empty div. The content will be added via AJAX.\r\n *\/\r\nfunction my_wp_ajax_noob_john_cena_shortcode_callback(){\r\n\r\n    \/* Enqueue JS only if this shortcode loaded. *\/\r\n    wp_enqueue_script( 'my-wp-ajax-noob-john-cena-script' );\r\n\r\n    \/* Output empty div. *\/\r\n    return '&lt;div id=\"john-cena\"&gt;&lt;\/div&gt;';\r\n}\r\n\r\n\r\n\/* 2. REGISTER SCRIPT\r\n------------------------------------------ *\/\r\n\r\n\/* Enqueue Script *\/\r\nadd_action( 'wp_enqueue_scripts', 'my_wp_ajax_noob_scripts' );\r\n\r\n\/**\r\n * Scripts\r\n *\/\r\nfunction my_wp_ajax_noob_scripts(){\r\n\r\n    \/* Plugin DIR URL *\/\r\n    $url = trailingslashit( plugin_dir_url( __FILE__ ) );\r\n\r\n    \/* JS + Localize *\/\r\n    wp_register_script( 'my-wp-ajax-noob-john-cena-script', $url . \"assets\/script.js\", array( 'jquery' ), '1.0.0', true );\r\n    wp_localize_script( 'my-wp-ajax-noob-john-cena-script', 'john_cena_ajax_url', admin_url( 'admin-ajax.php' ) );\r\n}\r\n\r\n\r\n\/* 3. AJAX CALLBACK\r\n------------------------------------------ *\/\r\n\r\n\/* AJAX action callback *\/\r\nadd_action( 'wp_ajax_john_cena', 'my_wp_ajax_noob_john_cena_ajax_callback' );\r\nadd_action( 'wp_ajax_nopriv_john_cena', 'my_wp_ajax_noob_john_cena_ajax_callback' );\r\n\r\n\r\n\/**\r\n * Ajax Callback\r\n *\/\r\nfunction my_wp_ajax_noob_john_cena_ajax_callback(){\r\n    $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N\/A';\r\n    $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N\/A';\r\n    ?&gt;\r\n    &lt;p&gt;Hello. Your first name is &lt;?php echo strip_tags( $first_name ); ?&gt;.&lt;\/p&gt;\r\n    &lt;p&gt;And your last name is &lt;?php echo strip_tags( $last_name ); ?&gt;.&lt;\/p&gt;\r\n    &lt;?php\r\n    wp_die(); \/\/ required. to end AJAX request.\r\n}\r\n<\/pre>\r\n&nbsp;\r\n<h2 id=\"blob-path\" class=\"breadcrumb flex-auto flex-self-center min-width-0 text-normal mx-2 width-full width-md-auto flex-order-1 flex-md-order-none mt-3 mt-md-0\"><strong class=\"final-path\">\/assets\/script.js<\/strong><\/h2>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">jQuery(document).ready(function($) {\r\n\r\n    $.ajax({\r\n        type: \"POST\",                 \/\/ use $_POST request to submit data\r\n        url: john_cena_ajax_url,      \/\/ URL to \"wp-admin\/admin-ajax.php\"\r\n        data: {\r\n            action     : 'john_cena', \/\/ wp_ajax_*, wp_ajax_nopriv_*\r\n            first_name : 'John',      \/\/ PHP: $_POST['first_name']\r\n            last_name  : 'Cena',      \/\/ PHP: $_POST['last_name']\r\n        },\r\n        success:function( data ) {\r\n            $( '#john-cena' ).html( data );\r\n        },\r\n        error: function(){\r\n            console.log(errorThrown); \/\/ error\r\n        }\r\n    });\r\n\r\n});<\/pre>\r\n&nbsp;","protected":false},"excerpt":{"rendered":"<p>\u7bc4\u4f8b\u4f86\u81ea\u65bc\uff1aWordPress AJAX for Beginners. \u9019\u500b\u7bc4\u4f8b &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[266],"tags":[],"class_list":["post-12797","post","type-post","status-publish","format-standard","hentry","category-266"],"_links":{"self":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12797","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/comments?post=12797"}],"version-history":[{"count":2,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12797\/revisions"}],"predecessor-version":[{"id":13253,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/12797\/revisions\/13253"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=12797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=12797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=12797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}