基于wordpress的ajax写法详解

想针对一个wordpress的模板程序进行更改,想到ajax的方便,就研究了一下。

以下是使用方法和代码:

js页面如下

<script>
  var ajaxurl = '<?php echo admin_url('admin-ajax.php')?>';
  function getVideo(id){
		//必须使用以下里面才能正常使用jquery
    jQuery(document).ready(function($){
      var data={
        tape:id,
				//这里尤为重要,action的参数要和请求的函数名一致
        action : 'get_ajax_video',
      }
      $.post(ajaxurl, data, function(response) {
        $('.player').html(response);
      });
    });
  }
</script>

AJAX请求应该指向wp-admin/admin-ajax.php。虽然”admin”这个词有点容易误导人,不过即使是前台的ajax请求,也应该定位到admin-ajax.php。

admin-ajax需要一个参数“action”。admin-ajax需要这个参数来处理请求,它通常触发一个hook,根据是否登录有所不同。

然后在插件或者主题里写函数

function get_ajax_video() {
  // 输出响应
  header( "Content-Type: application/json" );
  echo json_encode($html);
  exit;//这个停止一定要写
}
//函数名对应添加上,第一个表示用户没有登录时,这里全部都一样处理
add_action( 'wp_ajax_nopriv_get_ajax_video', 'get_ajax_video' );
add_action( 'wp_ajax_get_ajax_video', 'get_ajax_video' );

以上这篇基于wordpress的ajax写法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 原生AJAX写法实例分析

    本文实例分析了原生AJAX写法.分享给大家供大家参考.具体分析如下: 虽然现在很多JS的框架提供了AJAX的调用方法,我们甚至不用去了解其具体的实现原理就可以直接调用了,但是我认为不去从最基础的层面了解一个东西,就很难做到最好. var XHR=null; if (window.XMLHttpRequest) { // 非IE内核 XHR = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE内核,这里早期IE的版本写法不

  • javascript原生ajax写法分享

    ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: /** * 得到ajax对象 */ function getajaxHttp() { var xmlHttp; try { //chrome, Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e)

  • js基本ajax写法示例代码

    复制代码 代码如下: var xmlhttp = null; function myajax() { //1.创建XMLHttpRequest对象 //2.需要针对IE和其它浏览器建立这个对象的不同方式写不同的代码 if (window.XMLHttpRequest) { //针对FF,Mozilar,Opera,Safari,IE7,IE8 xmlhttp = new XMLHttpRequest(); //修正某些浏览器bug if (xmlhttp.overrideMimeType) {

  • 基于wordpress的ajax写法详解

    想针对一个wordpress的模板程序进行更改,想到ajax的方便,就研究了一下. 以下是使用方法和代码: js页面如下 <script> var ajaxurl = '<?php echo admin_url('admin-ajax.php')?>'; function getVideo(id){ //必须使用以下里面才能正常使用jquery jQuery(document).ready(function($){ var data={ tape:id, //这里尤为重要,acti

  • JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • 基于webpack.config.js 参数详解

    webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', './js/app.js' ], output: { path: './build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.

  • 基于SpringMVC接受JSON参数详解及常见错误总结

    最近一段时间不想使用Session了,想感受一下Token这样比较安全,稳健的方式,顺便写一个统一的接口给浏览器还有APP.所以把一个练手项目的前台全部改成Ajax了,跳转再使用SpringMVC控制转发.对于传输JSON数据这边有了更深的一些理解,分享出来,请大家指正. 在SpringMVC中我们可以选择数种接受JSON的方式,在说SpringMVC如何接受JSON之前,我们先聊聊什么是JSON.具体的定义我也不赘述了,在JavaScript中我们经常这样定义JSON 对象 var jsonO

  • 基于tomcat配置文件server.xml详解

    1. 入门示例:虚拟主机提供web服务 该示例通过设置虚拟主机来提供web服务,因为是入门示例,所以设置极其简单,只需修改$CATALINA_HOME/conf/server.xml文件为如下内容即可.其中大部分都采用了默认设置,只是在engine容器中添加了两个Host容器. <?xml version="1.0" encoding="UTF-8"?> <Server port="8005" shutdown="SH

  • js事件源window.event.srcElement兼容性写法(详解)

    如下所示: <html> <body> <p>一个好处就是 我想让body(或其他元素内)的某些对象响应事件 就不用挨个儿去写 只要在外层上写一个 然后检查event.srcElement.tagName或其他属性是不是你想要的来决定是否响应事件就可以了.不过好像event.srcElement在ff里不起作用 </p> <p>比如</p> <p> <input value="input">

  • 基于JavaScript表单脚本(详解)

    什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav

  • Ajax基础详解教程(一)

    什么是Ajax? 在研究ajax之前首先让我们先来讨论一个问题 --什么是Web 2.0 .听到 Web 2.0 这个词的时候,应该首先问一问 "Web 1.0 是什么?" 虽然很少听人提到 Web 1.0,实际上它指的就是具有完全不同的请求和响应模型的传统 Web.比如,到 hdu.edu.cn 网站上点击一个按钮.就会对服务器发送一个请求,然后响应再返回到浏览器.该请求不仅仅是新内容和项目列表,而是另一个完整的 HTML 页面.因此当 Web 浏览器用新的 HTML 页面重绘时,可

  • 基于AngularJS的简单使用详解

    Angular Js 的初步认识和使用 一: 1.模块化 定义模块和控制器 ng-app="myapp" controller="myctrl" 指定模型 ng-model="" 获取的属性值: ng-bind="属性名"或者{{属性名}} 2.初始化模块(在Script中进行) var myapp1 =angular.module("myapp",[]); 3.定义模块的控制器,并依赖注入, $scope

  • json传值以及ajax接收详解

    一开始进入公司,做起项目来比较不知所措,现在一个月过去了,越来越得心应手,下面是json向前端传值以及前端ajax接收,给自己记下也分享给大家. 这是两个类型不同的json与ajax的数据交互(集合.类对象) JsonConfig jsonConfig = new JsonConfig(); //lenient jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT); JSONArray json = JSONAr

随机推荐