在Wordpress网站上提交POST数据而不刷新?

时间:2015-01-16 22:23:41

标签: javascript php jquery ajax wordpress

我在互联网上搜索了很多关于我的问题的答案,并没有找到我正在寻找的确切内容。因此,从我所看到的标准方式来实现这一点是使用jQuery的submit和AJAX来发送数据并重定向到另一个PHP页面。但是,我有很多问题。首先,AJAX。从我所看到的,常规AJAX在Wordpress网站上不起作用。如何让常规的常规AJAX工作?我还没有看到一个关于傻瓜的简单英语的好教程。其次,PHP重定向。我只是希望它已经发送到页面上的PHP。我只是希望数据从我的Javascript到我的PHP已经在页面上。我不需要重定向。所以,我的最后一个问题是,为了以传统的方式做到这两个问题是否可以解决?或者有更好的方法可以绕过这些问题吗?我是一个完全的初学者,BTW-不到五个月做网络编程。所以,如果可以,请为傻瓜或完整的白痴语言。这是我提交的表格:

<form method="post">
Search By File Name: <input type="text" name="searchterms" placeholder="search"></input>
<button type="submit" name="SearchSubmit">Display Results</button>
</form>

这是我想要执行的PHP:

$submit=$_POST['SearchSubmit'];
$results=$_POST['searchterms'];
if(isset($submit))
{
//whole bunch of stuff, like sql queries and file generation
}

3 个答案:

答案 0 :(得分:2)

代码有3部分,

要显示数据的HTML。

 <div id="msg_alert"></div>

jquery for ajax;

    $('#msg_form').submit(function (event) {
    event.preventDefault();
    action = 'messaging_post';
    user_id = $('#msg_form #user_id').val(); 
    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: ajax_auth_object.ajaxurl,
        data: {
            'action': action,
            'user_id': user_id
        },
        success: function (data) { //alert(data.message);
            if (data.log== true) {
                $('#msg_alert').val(data.message);
            }
            else {
            $('#msg_alert').val('There is an error');
                }
        }
    });

}); 

第三是PHP:

add_action('init', 'ajax_review_loading');
function ajax_review_loading() {    
    wp_localize_script( 'ajax-auth-script', 'ajax_auth_object', array( 
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'redirecturl' => home_url(),
    'loadingmessage' => __('Sending user info, please wait...')
    ));
    add_action( 'wp_ajax_messaging_post', 'messaging_post' );
}   
function messaging_post(){
    /// Your work here.
    echo json_encode(array('log'=>true, 'message'=> $htm));
    die();
}

答案 1 :(得分:0)

要工作,必须将 wp_enqueue_script 添加到ajax_review_loading函数

add_action('init', 'ajax_review_loading');
function ajax_review_loading() {  

    wp_enqueue_script('ajax-auth-script', get_template_directory_uri() );

    wp_localize_script( 'ajax-auth-script', 'ajax_auth_object', array( 
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'redirecturl' => home_url(),
    'loadingmessage' => __('Sending user info, please wait...')
    ));
    add_action( 'wp_ajax_messaging_post', 'messaging_post' );
}   
function messaging_post(){
    /// Your work here.
    echo json_encode(array('log'=>true, 'message'=> $htm));
    die();
}

答案 2 :(得分:-1)

您可能需要2个php文件,一个生成您已经看到的页面的文件,让我们调用它&#34; my_page.php&#34;,以及生成您加载的数据的文件在没有刷新它的第一页中,让我们称之为&#34; livedata.php&#34;。

例如,如果&#34; my_page.php&#34;生成以下html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  function refresh_data(start_at) {
    $("#data_updates_go_here").empty();   // Clear previous contents of the div for refresh
    $.getJSON("livedata.php?start_at=" + start_at,
      function(json_returned) {
         $.each(json_returned, function(key, value){
           $("#data_updates_go_here").append(key + " = " + value + "<br />");
         });
      });
  }
</script>
Data: <br/>
<div id="data_updates_go_here">
</div>
<input type=button onClick="refresh_data(1);" value="Refresh data at 1">
<input type=button onClick="refresh_data(3);" value="Refresh data at 3">

您可以看到,当您加载&#34; my_page.php&#34;时,它不会显示任何数据。在div里面。

现在&#34; livedata.php&#34;如上所示,它可以生成json结构,它可以接收参数,因此您可以使用它们,例如,将查询限制到数据库或用于您需要的任何其他目的要传递给你的php的参数。在示例中,&#34; livedata.php&#34;应该返回一个&#39; json&#39;结构体。例如,您的PHP代码可能是

<?php
header('Content-Type: application/json');
if ($_REQUEST['start_at'] == 1) {
    echo json_encode(array('value1' => 'data1', 'value2' => 'data2'));
} else if ($_REQUEST['start_at'] == 3) {
    echo json_encode(array('value3' => 'data3', 'value4' => 'data4'));
} else {
    echo json_encode(array('value1' => 'data1', 'value2' => 'data2'));
}
?>

您可以通过为&#34; start_at&#34;传递不同的值来了解如何控制刷新的值。