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

Question

我在互联网上搜索了很多我的问题的答案，但没有找到我要找的东西。因此，根据我所见，实现此目的的标准方法是使用 jQuery 的提交和 AJAX 发送数据并重定向到另一个 PHP 页面。但是，我对此有很多问题。首先，AJAX。据我所见，常规 AJAX 在 Wordpress 网站上不起作用。我如何让普通的旧常规 AJAX 工作？我还没有看到一个简单的英语傻瓜教程。其次，PHP 重定向。我只想将其发送到页面上已有的 PHP。我只希望数据从我的 Javascript 进入我的 PHP 已经在页面上。我不需要重定向。所以，我的最后一个问题是，这两个问题是否可以通过传统方式解决？或者是否有更好的方法来规避这些问题？顺便说一句，我是一个完全的初学者——从事网络编程还不到五个月。所以，如果可以的话，请使用 Dummies 或 Complete Idiot 的语言。这是我提交的表格：

<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
}

Answer 1

代码有3部分，

HTML 要显示数据的位置。

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

Jquery 对于 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();
}

Answer 2

您可能需要 2 个 php 文件，一个生成您已经看到的页面，我们称它为 "my_page.php"，另一个生成您首先加载的数据页面不刷新，暂且称它为"livedata.php".

例如，如果 "my_page.php" 生成以下 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">

您可以看到当您加载"my_page.php"时，它不会显示任何数据。 div.

里面

现在 "livedata.php" 在它这边必须生成一个 json 结构，正如你在上面看到的，它可以接收参数，所以你可以使用它们，例如，将查询限制为数据库或出于任何其他目的，您需要将参数传递给 php。在示例中，"livedata.php" 应该 return 一个 'json' 结构。例如，您的 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'));
}
?>

您可以看到如何通过为 "start_at" 传递不同的值来控制刷新的值。

Answer 3

为了工作，您必须将 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();
}

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

Submit POST data without refreshing on a Wordpress site?

javascript

php

ajax

wordpress

jquery