站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:AJAX in Plugin
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
== 管理界面的Ajax == Since Ajax is already built into the core WordPress administration screens, adding more administration-side Ajax functionality to your plugin is fairly straightforward, and this section describes how to do it. As mentioned above, if you want to use Ajax on the blog-viewer-facing side of WordPress, you can completely skip this section of the article. 因为Ajax已经置入核心的WordPress管理界面,向你的插件添加更多的管理界面的Ajax功能,非常直接,这个部分阐述了怎样实现这个操作。如上所述,如果你希望在博客访客界面上使用Ajax,你完成可以跳过文章的这个部分。 As a simple example of using Ajax on the administration screens of a WordPress plugin, consider a geographical tagging plugin, where the user enters the latitude and longitude for a post, and the plugin will look up the elevation at that point, using a web service. Before we even think about Ajax programming, we need some fields on the screen where the user can enter the latitude and longitude, a button to look up elevation, and an elevation field to display the result. This article assumes you already know how to add these to the appropriate screen, and can adjust field widths, text, styles, etc. to your liking; you'll want to add something like this, inside an HTML form in the admin screens: 举一个在WordPress管理界面中使用Ajax的一个简单的例子,如一个geographical 标签插件,用户在这个插件中输入文章的 latitude 和 longitude ,插件就会使用网页服务,查找文章的elevation。考虑Ajax程序之前,在界面上我们需要一些栏,用户可以在这些栏中输入latitude 和longitude,还要有个按钮查找 elevation,还有个elevation栏显示结果。这篇文章假定你已经知道了怎样将这些栏添加到适当的界面,而且能够根据你的喜好,调整栏的宽度,文本,样式,等等;你可能想将这些内容,添加到管理界面中的HTML样式中: <pre> Latitude: <input type="text" name="latitude_field" /> Longitude: <input type="text" name="longitude_field" /> <input type="button" value="Look Up Elevation" onclick="myplugin_ajax_elevation(this.form.latitude_field,this.form.longitude_field,this.form.elevation_field);" /> Elevation: <input type="text" name="elevation_field" id="elevation_field" /> </pre> <pre> Latitude: <input type="text" name="latitude_field" /> Longitude: <input type="text" name="longitude_field" /> <input type="button" value="Look Up Elevation" onclick="myplugin_ajax_elevation(this.form.latitude_field,this.form.longitude_field,this.form.elevation_field);" /> Elevation: <input type="text" name="elevation_field" id="elevation_field" /> </pre> Next, we need to define the JavaScript function <tt>myplugin_ajax_elevation</tt>, the onClick action for the button, which will read the information the user entered, compose a request with SACK, and send it to the plugin for processing. As mentioned in the previous section, this JavaScript function and the SACK library need to get added to the HTML head section of the administration screen in question; the easiest way to do that is to add it to all admin screens using the <tt>admin_print_scripts</tt> action: 接着,我们需要定义JavaScript函数<tt>myplugin_ajax_elevation</tt>,按钮的onClick action,会阅读用户输入的信息,使用SACK创建请求,并且将请求发送到插件,等待处理。如先前部分所描述的,这个JavaScript函数和SACK集需要添加到正在讨论的管理界面的HTML标头部分;最简单的方法就是使用<tt>admin_print_scripts</tt> action,将其添加到所有的管理界面: <pre> add_action('admin_print_scripts', 'myplugin_js_admin_header' ); function myplugin_js_admin_header() // this is a PHP function { // use JavaScript SACK library for Ajax wp_print_scripts( array( 'sack' )); // Define custom JavaScript function ?> <script type="text/javascript"> //<![CDATA[ function myplugin_ajax_elevation( lat_field, long_field, elev_field ) { // function body defined below } // end of JavaScript function myplugin_ajax_elevation //]]> </script> <?php } // end of PHP function myplugin_js_admin_header </pre> <pre> add_action('admin_print_scripts', 'myplugin_js_admin_header' ); function myplugin_js_admin_header() //这是个PHP函数 { // 为Ajax使用JavaScript SACK 集 wp_print_scripts( array( 'sack' )); // 定义自定义的JavaScript函数 ?> <script type="text/javascript"> //<![CDATA[ function myplugin_ajax_elevation( lat_field, long_field, elev_field ) { // 函数主体在下面定义了 } // JavaScript 函数 myplugin_ajax_elevation的结尾部分 //]]> </script> <?php } // PHP 函数myplugin_js_admin_header的结尾部分 </pre> The next step is to fill in the body of the <tt>myplugin_ajax_elevation</tt> JavaScript function, which is supposed to read the latitude and longitude from the form fields, compose an Ajax request with SACK, and send the request to the server. Given the list of generic SACK information from the previous section, here is what we need to set up for this example: * '''Request URL''': We're going to send our request to a special URL that is defined in the administration menu system of WordPress: <tt>(bloghome)/wp-admin/admin-ajax.php</tt>. Below, we'll see how to add a special Ajax action to WordPress that will tell that script which plugin PHP function to call when the request is received. For our purposes, let's assume the action is called "myplugin_elev_lookup". 其次是要添加<tt>myplugin_ajax_elevation</tt> JavaScript 函数的主题部分,这个函数应用从表格栏中读出latitude 和 longitude ,使用SACK创建Ajax请求,并且将请求发送到服务器。给出前部分的一般的SACK信息列表,下面是我们需要为这个例子,设置的内容: * '''请求的 URL''': 我们将要将我们的请求发送了一个特别的URL,这个URL定义在WordPress管理菜单系统: <tt>(bloghome)/wp-admin/admin-ajax.php</tt>。在下面,我们会了解怎样将特别的Ajax添加到WordPress,会通知脚本,收到请求的时候,调用哪个插件PHP函数。鉴于我们的目的,我们假定action称为"myplugin_elev_lookup"。 * '''Custom request variables''': We need to send the latitude and longitude to the server; we also need to send our "action" name to the <tt>admin-ajax.php</tt> script. We also need to send the current page's cookies, since they contains the login information. And finally, since our server-side function will need to return JavaScript to display the results, we'll need to pass the ID of the elevation field into our function. * '''自定义请求变数''':我们需要将latitude和longitude发送到服务器;我们也需要将我们的"action"名发送到<tt>admin-ajax.php</tt>脚本。我们也需要发送当前网页的cookies,因为这些cookies包含有登录信息。最后,因为我们服务器方面的函数需要返回JavaScript显示结果,我们需要将elevation field的ID发送到我们的函数中。 Putting it all together, the body of the JavaScript function becomes: 将所有总结,JavaScript函数的主体成为: <pre> function myplugin_ajax_elevation( lat_field, long_field, elev_field ) { var mysack = new sack( "<?php bloginfo( 'wpurl' ); ?>/wp-admin/admin-ajax.php" ); mysack.execute = 1; mysack.method = 'POST'; mysack.setVar( "action", "myplugin_elev_lookup" ); mysack.setVar( "latitude", lat_field.value ); mysack.setVar( "longitude", long_field.value ); mysack.setVar( "elev_field_id", elev_field.id ); mysack.encVar( "cookie", document.cookie, false ); mysack.onError = function() { alert('Ajax error in looking up elevation' )}; mysack.runAJAX(); return true; } // end of JavaScript function myplugin_ajax_elevation </pre> <pre> function myplugin_ajax_elevation( lat_field, long_field, elev_field ) { var mysack = new sack( "<?php bloginfo( 'wpurl' ); ?>/wp-admin/admin-ajax.php" ); mysack.execute = 1; mysack.method = 'POST'; mysack.setVar( "action", "myplugin_elev_lookup" ); mysack.setVar( "latitude", lat_field.value ); mysack.setVar( "longitude", long_field.value ); mysack.setVar( "elev_field_id", elev_field.id ); mysack.encVar( "cookie", document.cookie, false ); mysack.onError = function() { alert('Ajax error in looking up elevation' )}; mysack.runAJAX(); 返回正确的; } // JavaScript函数 function myplugin_ajax_elevation的结尾部分 </pre> The final step in this example is to define what happens when the Ajax request gets to the server. As mentioned above, we are sending the request to <tt>(bloghome)/wp-admin/admin-ajax.php</tt>, with an "action" parameter of "myplugin_elev_lookup". We'll use the <tt>wp_ajax_*</tt> action to tell WordPress which PHP function in our plugin to call when it receives this request. 这个例子中的最后一个操作设置确定Ajax请求进入服务器的时候,发生了什么,我们将请求发送到<tt>(bloghome)/wp-admin/admin-ajax.php</tt>,使用"myplugin_elev_lookup"的"action"参数。我们会使用<tt>wp_ajax_*</tt> action告诉WordPress,当WordPress收到请求的时候,会调用我们插件中的哪个PHP函数。 Our PHP function will need to send the latitude and longitude to the elevation lookup server, wait for a response, parse the result, and send the information back as JavaScript commands. We'll use the "Snoopy" web request PHP class (built into WordPress) to send the web request. Here's how to do it: 我们的PHP函数需要将latitude和 longitude发送到elevation查找服务器,等待响应,解析结构,再将信息作为JavaScript命令发送回。我们将要使用"Snoopy"网络请求PHP class(置入WordPress)发送网络请求。下面是操作方式: <pre> add_action('wp_ajax_myplugin_elev_lookup', 'myplugin_ajax_elev_lookup' ); function myplugin_ajax_elev_lookup() { // read submitted information $lat = $_POST['latitude']; $long = $_POST['longitude']; $field_id = $_POST['elev_field_id']; $units = "FEET"; // Build Snoopy URL request require_once( ABSPATH . WPINC . '/class-snoopy.php' ); $sno = new Snoopy(); $sno->agent = 'WordPress/' . $wp_version; $sno->read_timeout = 2; $reqURL = "http://gisdata.usgs.gov/XMLWebServices/TNM_Elevation_Service.asmx/getElevation?Y_Value=$lat&X_Value=$long&Elevation_Units=$units&Source_Layer=-1&Elevation_Only=1"; // Send request to elevation server if( !$sno->fetchtext( $reqURL )) { die( "alert('Could not connect to lookup host.')" ); } // Parse response if( !preg_match("|<Elevation>([\d.-]+)</Elevation>|",$sno->results)){ die( "alert('Could not find elevation in lookup results.')" ); } $matches=preg_split( "|<Elevation>([\d.-]+)</Elevation>|",$sno->results); //REGEX BUG: but it'll return info // Compose JavaScript for return die( "document.getElementById('$field_id').value = " . $matches[1] ); } // end of myplugin_axax_elev_lookup function </pre> <pre> add_action('wp_ajax_myplugin_elev_lookup', 'myplugin_ajax_elev_lookup' ); function myplugin_ajax_elev_lookup() { //阅读递交的信息 $lat = $_POST['latitude']; $long = $_POST['longitude']; $field_id = $_POST['elev_field_id']; $units = "FEET"; // 设置Snoopy URL请求 require_once( ABSPATH . WPINC . '/class-snoopy.php' ); $sno = new Snoopy(); $sno->agent = 'WordPress/' . $wp_version; $sno->read_timeout = 2; $reqURL = "http://gisdata.usgs.gov/XMLWebServices/TNM_Elevation_Service.asmx/getElevation?Y_Value=$lat&X_Value=$long&Elevation_Units=$units&Source_Layer=-1&Elevation_Only=1"; // 将请求发送到elevation 服务器 if( !$sno->fetchtext( $reqURL )) { die( "alert('不能够连接到查找服务器')" ); } // 解析结果 if( !preg_match("|<Elevation>([\d.-]+)</Elevation>|",$sno->results)){ die( "alert('Could not find elevation in lookup results.')" ); } $matches=preg_split( "|<Elevation>([\d.-]+)</Elevation>|",$sno->results); //REGEX BUG: but it'll return info // 创建JavaScript返回 die( "document.getElementById('$field_id').value = " . $matches[1] ); } // end of myplugin_axax_elev_lookup function </pre> That's it! You will need to add a few details, such as error checking and verifying that the request came from the right place, but hopefully the example above will be enough to get you started on your own administration-side Ajax plugin. 就这么多了!你需要添加一些详细信息,如错误检查,确认请求来自正确的地点,但是希望上述的例子,能够充分地帮助你开始处理你自己管理界面的Ajax插件。
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)