WordPress AJAX - 存储jquery变量并在php中回显它 - function.php?

时间:2020-12-19 15:42:24

Is it possible to send jQuery variable to function.php, and use it in some php function? Via AJAX or probably.

是否可以将jQuery变量发送到function.php,并在某些php函数中使用它?通过AJAX或可能。

Theme related, not using a plugin.

主题相关,不使用插件。

Eg. I have some post CSS classes added on 'client side' via jQuery on click.

例如。我在点击时通过jQuery在'客户端'添加了一些后期CSS类。

Can I use this classes on 'server side' so I can pass them in any page of my theme?

我可以在“服务器端”使用这个类,所以我可以在我的主题的任何页面中传递它们吗?

4 个解决方案

#1


3  

WordPress environment

WordPress环境

First of all, in order to achieve this task, it's recommended to register then enqueue a jQuery script that will push the request to the server. These operations will be hooked in wp_enqueue_scripts action hook. In the same hook you should put wp_localize_script that it's used to include arbitrary Javascript. By this way there will be a JS object available in front end. This object carries on the correct url to be used by the jQuery handle.

首先,为了完成这项任务,建议注册然后将jQuery脚本排入队列,将脚本推送到服务器。这些操作将挂钩在wp_enqueue_scripts动作钩子中。在同一个钩子中你应该把它用于包含任意Javascript的wp_localize_script。通过这种方式,前端将有一个JS对象。该对象进行jQuery句柄使用的正确url。

Please take a look to:

请看看:

  1. wp_register_script(); function
  2. wp_register_script();功能
  3. wp_enqueue_scripts hook
  4. wp_enqueue_scripts钩子
  5. wp_enqueue_script(); function
  6. wp_enqueue_script();功能
  7. wp_localize_script(); function
  8. wp_localize_script();功能

File: functions.php 1/2

文件:functions.php 1/2

add_action( 'wp_enqueue_scripts', 'so18550905_enqueue_scripts' );
function so18550905_enqueue_scripts(){
  wp_register_script( 'ajaxHandle', get_template_directory() . 'PATH TO YOUR SCRIPT FILE', array(), false, true );
  wp_enqueue_script( 'ajaxHandle' );
  wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) );
}

File: jquery.ajax.js

文件:jquery.ajax.js

This file makes the ajax call.

该文件进行ajax调用。

jQuery(document).ready( function($){
  //Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call
  $.ajax({
    url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
    type: 'POST',
    data:{
      action: 'myaction', // this is the function in your functions.php that will be triggered
      name: 'John',
      age: '38'
    },
    success: function( data ){
      //Do something with the result from server
      console.log( data );
    }
  });
});

File: functions.php 2/2

文件:functions.php 2/2

Finally on your functions.php file there should be the function triggered by your ajax call. Remember the suffixes:

最后在你的functions.php文件中应该有你的ajax调用触发的函数。记住后缀:

  1. wp_ajax ( allow the function only for registered users or admin panel operations )
  2. wp_ajax(仅限注册用户或管理面板操作的功能)
  3. wp_ajax_nopriv ( allow the function for no privilege users )
  4. wp_ajax_nopriv(允许无特权用户的功能)

These suffixes plus the action compose the name of your action:

这些后缀加上操作组成了您的操作名称:

wp_ajax_myaction or wp_ajax_nopriv_myaction

wp_ajax_myaction或wp_ajax_nopriv_myaction

add_action( 'wp_ajax_myaction', 'so18550905_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_myaction' 'so18550905_wp_ajax_function' );
function so18550905_wp_ajax_function(){
  //DO whatever you want with data posted
  //To send back a response you have to echo the result!
  echo $_POST['name'];
  echo $_POST['age'];
  wp_die(); // ajax call must die to avoid trailing 0 in your response
}

Hope it helps!

希望能帮助到你!

Let me know if something is not clear.

如果有什么不清楚,请告诉我。

#2


3  

Yes you can use AJAX to send your jQuery variable. (or any Javascript Variable)

是的,您可以使用AJAX发送您的jQuery变量。 (或任何Javascript变量)

Simply do a JSON.stringify(any-Variable-Here) then you get a corresponding string.

只需执行JSON.stringify(any-Variable-Here),然后获得相应的字符串。

Send the value via AJAX to any php file like:

通过AJAX将值发送到任何php文件,如:

var toBeSent = JSON.stringify($($('#selector')[0]).attr('class'));
$.ajax({
  type: "POST",
  url: 'function.php',
  data: toBeSent,
  success: function(data){ // any action to be performed after function.php returns a value.
  },
  dataType: 'text'
});

NOTE: I've stringified the items here so that you can access the variables on the server side by doing simple splits.

注意:我在这里对项目进行了字符串化,以便您可以通过简单的拆分来访问服务器端的变量。

#3


3  

Sure you can

你当然可以

$('element').click(function(e){
    e.preventDefault();
    var el = $(this);

    //do stuff on click

    //send this elements class to the server    
    $.ajax({
       url: "some.php",
       data: {
           class: el.attr('class')
       },
       success: function(r){
           alert("class name sent successfully to some.php");
       }
    });
});

#4


2  

another option for you could be $.post()

另一种选择可能是$ .post()

$(document).ready( function() {

$('#myDiv').click(function(){
var myClass = $(this).attr('class');
var url = 'page.php';
   $.post(url, { class: myClass })
   .done( function() {
     alert('class sent to ' + url);
   });
 }); 

}); 

#1


3  

WordPress environment

WordPress环境

First of all, in order to achieve this task, it's recommended to register then enqueue a jQuery script that will push the request to the server. These operations will be hooked in wp_enqueue_scripts action hook. In the same hook you should put wp_localize_script that it's used to include arbitrary Javascript. By this way there will be a JS object available in front end. This object carries on the correct url to be used by the jQuery handle.

首先,为了完成这项任务,建议注册然后将jQuery脚本排入队列,将脚本推送到服务器。这些操作将挂钩在wp_enqueue_scripts动作钩子中。在同一个钩子中你应该把它用于包含任意Javascript的wp_localize_script。通过这种方式,前端将有一个JS对象。该对象进行jQuery句柄使用的正确url。

Please take a look to:

请看看:

  1. wp_register_script(); function
  2. wp_register_script();功能
  3. wp_enqueue_scripts hook
  4. wp_enqueue_scripts钩子
  5. wp_enqueue_script(); function
  6. wp_enqueue_script();功能
  7. wp_localize_script(); function
  8. wp_localize_script();功能

File: functions.php 1/2

文件:functions.php 1/2

add_action( 'wp_enqueue_scripts', 'so18550905_enqueue_scripts' );
function so18550905_enqueue_scripts(){
  wp_register_script( 'ajaxHandle', get_template_directory() . 'PATH TO YOUR SCRIPT FILE', array(), false, true );
  wp_enqueue_script( 'ajaxHandle' );
  wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) );
}

File: jquery.ajax.js

文件:jquery.ajax.js

This file makes the ajax call.

该文件进行ajax调用。

jQuery(document).ready( function($){
  //Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call
  $.ajax({
    url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function
    type: 'POST',
    data:{
      action: 'myaction', // this is the function in your functions.php that will be triggered
      name: 'John',
      age: '38'
    },
    success: function( data ){
      //Do something with the result from server
      console.log( data );
    }
  });
});

File: functions.php 2/2

文件:functions.php 2/2

Finally on your functions.php file there should be the function triggered by your ajax call. Remember the suffixes:

最后在你的functions.php文件中应该有你的ajax调用触发的函数。记住后缀:

  1. wp_ajax ( allow the function only for registered users or admin panel operations )
  2. wp_ajax(仅限注册用户或管理面板操作的功能)
  3. wp_ajax_nopriv ( allow the function for no privilege users )
  4. wp_ajax_nopriv(允许无特权用户的功能)

These suffixes plus the action compose the name of your action:

这些后缀加上操作组成了您的操作名称:

wp_ajax_myaction or wp_ajax_nopriv_myaction

wp_ajax_myaction或wp_ajax_nopriv_myaction

add_action( 'wp_ajax_myaction', 'so18550905_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_myaction' 'so18550905_wp_ajax_function' );
function so18550905_wp_ajax_function(){
  //DO whatever you want with data posted
  //To send back a response you have to echo the result!
  echo $_POST['name'];
  echo $_POST['age'];
  wp_die(); // ajax call must die to avoid trailing 0 in your response
}

Hope it helps!

希望能帮助到你!

Let me know if something is not clear.

如果有什么不清楚,请告诉我。

#2


3  

Yes you can use AJAX to send your jQuery variable. (or any Javascript Variable)

是的,您可以使用AJAX发送您的jQuery变量。 (或任何Javascript变量)

Simply do a JSON.stringify(any-Variable-Here) then you get a corresponding string.

只需执行JSON.stringify(any-Variable-Here),然后获得相应的字符串。

Send the value via AJAX to any php file like:

通过AJAX将值发送到任何php文件,如:

var toBeSent = JSON.stringify($($('#selector')[0]).attr('class'));
$.ajax({
  type: "POST",
  url: 'function.php',
  data: toBeSent,
  success: function(data){ // any action to be performed after function.php returns a value.
  },
  dataType: 'text'
});

NOTE: I've stringified the items here so that you can access the variables on the server side by doing simple splits.

注意:我在这里对项目进行了字符串化,以便您可以通过简单的拆分来访问服务器端的变量。

#3


3  

Sure you can

你当然可以

$('element').click(function(e){
    e.preventDefault();
    var el = $(this);

    //do stuff on click

    //send this elements class to the server    
    $.ajax({
       url: "some.php",
       data: {
           class: el.attr('class')
       },
       success: function(r){
           alert("class name sent successfully to some.php");
       }
    });
});

#4


2  

another option for you could be $.post()

另一种选择可能是$ .post()

$(document).ready( function() {

$('#myDiv').click(function(){
var myClass = $(this).attr('class');
var url = 'page.php';
   $.post(url, { class: myClass })
   .done( function() {
     alert('class sent to ' + url);
   });
 }); 

});