站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:AJAX in Plugin
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
== 访客界面的Ajax == Implementing Ajax on the viewer-facing side of a WordPress site is slightly more ad-hoc than doing Ajax on the administration side, because WordPress itself doesn't have viewer-facing Ajax built in, but it's not too bad, and this section describes how to do it. As mentioned above, if you want to use Ajax on the administration side of WordPress, you can completely skip this section of the article. 在WordPress站点的访客界面执行Ajax比在管理界面执行,要稍微特别,因为WordPress本身没有内置的访客界面的Ajax,但是这并不坏,这个部分描述了怎样操作。如上所述,如果你想要在WordPress管理界面使用Ajax,你可以完成地跳过文章的这个部分。 As an example, let's consider a plugin that allows a blog viewer to vote on or rate something (which could be a generic poll plugin, a post rating plugin, or something else like that). When the blog viewer submits a vote, we want the submission to go via Ajax, so that the viewer doesn't have to wait for the page to refresh; after the vote is registered, we'll want to update the running vote total display. For this example, we'll assume the voting and display are text-based, for simplicity, and we'll assume you've either edited the theme or used a WordPress filter or action to add HTML to the appropriate WordPress viewer-facing screen. The added HTML will look something like this: 作为例子,假如插件能够使得博客访问投票或者给某个东西排名(可能是一般的投票插件,文章级别插件或者其它类似的插件)。当博客访客递交了投票后,我们希望投票通过Ajax递交,这样访客不需要等待网页刷新;投票递交之后,我们想要更新总共显示的投票数目。在这个例子中,我们假定是以文本为基础显示投票的,这样更简单,我们假定你编辑了主题或者使用WordPress filter或者action,将HTML添加到适当的WordPress访客界面。添加的HTML可能看起来像: <pre> <form> Your vote: <input type="text" name="uservote" /> <input type="button" value="Vote!" onclick="myplugin_cast_vote(this.form.uservote,'voteresults');" /> <div id="voteresults"> (previous results output from your PHP function) </div> </form> </pre> <pre> <form> 你的投票: <input type="text" name="uservote" /> <input type="button" value="Vote!" onclick="myplugin_cast_vote(this.form.uservote,'voteresults');" /> <div id="voteresults"> (来自你的PHP函数,输出先前的结果) </div> </form> </pre> Next, we need to define the JavaScript function <tt>myplugin_cast_vote</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 introductory section, this JavaScript function and the SACK library need to get added to the HTML head section of the web page the user is viewing. One way to do that is to add it to all viewer-facing screens using the <tt>wp_head</tt> action (you could also be a little more selective by using some of the <tt>is_xyz()</tt> [[WordPress:Conditional Tags]] tests): 其次,我们需要定义JavaScript函数<tt>myplugin_cast_vote</tt>,按钮的onClick action,会阅读用户输入的信息,使用SACK创建请求,并且将请求发送到插件,等待处理。如介绍部分所提到的,这个JavaScript函数和SACK集需要添加到用户浏览的网页的HTML标头部分。一种方式是使用<tt>wp_head</tt> action将其添加到所有的访客界面(使用一些<tt>is_xyz()</tt> [[WordPress:Conditional Tags|条件式标签]]测试,你可以拥有更多的选择): <pre> add_action('wp_head', 'myplugin_js_header' ); function myplugin_js_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_cast_vote( vote_field, results_div ) { // function body defined below } // end of JavaScript function myplugin_cast_vote //]]> </script> <?php } // end of PHP function myplugin_js_header </pre> <pre> add_action('wp_head', 'myplugin_js_header' ); function myplugin_js_header() // 这是个PHP函数 { // 为Ajax使用JavaScript SACK集 wp_print_scripts( array( 'sack' )); //定义自定义的 JavaScript 函数 ?> <script type="text/javascript"> //<![CDATA[ function myplugin_cast_vote( vote_field, results_div ) { // 下面定义了函数主体 } // JavaScript 函数 myplugin_cast_vote的结尾部分 //]]> </script> <?php } // PHP 函数 myplugin_js_header的结尾部分 </pre> The next step is to fill in the body of the <tt>myplugin_cast_vote</tt> JavaScript function, which is supposed to read the vote from the form field, compose an Ajax request with SACK, and send the request to the server. Given the list of generic SACK information from the introductory section, here is what we need to set up for this example: 下一步是要填写<tt>myplugin_cast_vote</tt> JavaScript函数的主体部分,这个函数应该会从表格栏中阅读票数,并且使用SACK创建Ajax请求,然后将请求返回到服务器。给出了介绍部分的一般的SACK信息列表,下面是我们需要为这个例子设置什么: * '''Request URL''': We need to send our request to a plugin PHP file. This could be the main plugin PHP file, or a separate PHP file. It's probably a little cleaner to do it in a separate file, which we'll assume is called "myplugin_ajax.php", located in the standard <tt>wp-content/plugins</tt> directory of WordPress. * '''请求 URL''':我们需要将我们的请求发送到插件PHP文件。这可能是主要的插件PHP文件,或者分开的PHP文件。在分卡的文件中执行,可能更清晰,假如这个文件称为"myplugin_ajax.php",位于标准的WordPress<tt>wp-content/plugins</tt>目录。 * '''Custom request variables''': We only need to send the vote and the ID of the div where the results go to the server, in this simple example. * '''自定义请求变数''':在这个简单的例子中,我们只需要发送投票和投票结果进入服务器的div的ID。 Putting this together, the body of the JavaScript function becomes: 将这个放在一起,JavaScript函数的主体部分变为: <pre> function myplugin_cast_vote( vote_field, results_div ) { var mysack = new sack( "<?php bloginfo( 'wpurl' ); ?>/wp-content/plugins/myplugin_ajax.php" ); mysack.execute = 1; mysack.method = 'POST'; mysack.setVar( "vote", vote_field.value ); mysack.setVar( "results_div_id", results_div ); mysack.onError = function() { alert('Ajax error in voting' )}; mysack.runAJAX(); return true; } // end of JavaScript function myplugin_cast_vote </pre> <pre> function myplugin_cast_vote( vote_field, results_div ) { var mysack = new sack( "<?php bloginfo( 'wpurl' ); ?>/wp-content/plugins/myplugin_ajax.php" ); mysack.execute = 1; mysack.method = 'POST'; mysack.setVar( "vote", vote_field.value ); mysack.setVar( "results_div_id", results_div ); mysack.onError = function() { alert('Ajax error in voting' )}; mysack.runAJAX(); 返回正确的; } // JavaScript 函数myplugin_cast_vote的结尾部分 </pre> The final step in this example is to define what happens when the Ajax request gets to the server. This will go into the <tt>myplugin_ajax.php</tt> file, which will need to read the posted information, verify that the vote is valid, add the vote to the database, figure out what the new running totals are, and send that back to the browser. Leaving aside all the details of processing the vote, here's what needs to go into the file: 这个例子中的最后一个操作是,确定当Ajax请求进入服务器的时候,会发生什么。结果会进入<tt>myplugin_ajax.php</tt>文件,需要阅读已发表的信息,确定投票是有效的,将投票添加到数据库,确定新的投票总数,并且将结果发送到服务器。将处理投票过程放置一边,下面是需要输入文件的内容: <pre> <?php // Put your author and license information here // TO DO! // Check request came from valid source here // TO DO! // read submitted information $vote = $_POST['vote']; $results_id = $_POST['results_div_id']; // Put your vote processing code here // In this example, assume // a) The processing code sets global // variable $error to a message if there is an error // b) If there is no error, $results contains // the HTML to put into the results DIV on the screen if( $error ) { die( "alert('$error')" ); } // Compose JavaScript for return die( "document.getElementById('$results_id').innerHTML = '$results'" ); ?> </pre> <pre> <?php // 将你的作者和许可信息添在这里 // 操作! // 查看这里有效的请求 // 执行! // 阅读递交的信息 $vote = $_POST['vote']; $results_id = $_POST['results_div_id']; // 在这里放入你的投票过程代码 // 在这个例子中,假如,如果有错误, // a)处理代码将全局、 // 变数$error设置到message // b) 如果没错误, $results 包含 // HTML 放置到界面上的结果DIV if( $error ) { die( "alert('$error')" ); } // 从结果中创建JavaScript die( "document.getElementById('$results_id').innerHTML = '$results'" ); ?> </pre> That's it! You will need to add a few details, such as error checking, escaping quotes, processing the vote, 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 viewer-side Ajax plugin. 就这么多了!你需要添加一些详细信息,如错误检查,escaping quotes,处理投票,确认请求来自合适的位置,但是希望上面的例子能够使你开始处理你在自己的访客界面的Ajax插件。
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)