无法成功执行AJAX脚本以调用函数.php特定的函数。使用XAMPP本地主机进行测试

时间：2019-04-14 作者：Dennisio

在过去的12个小时里，我一直在努力掌握AJAX，但我正在慢慢失去它。如何通过表单或任何其他方式传递两个基本输入日期，而不是刷新页面，并让它执行包含JS脚本的PHP函数？

在我将值传递给脚本之前，我只想回显我传递的数据数组，看看是否。。。ajax正在发挥作用。表单按钮只会刷新页面，所以我认为AJAX根本没有发挥作用。我正在试穿https://localhost 对于xampp。我不知道停止刷新并在按钮上插入ajax脚本缺少了什么。

欣赏任何见解。

功能。php

<?php
add_action(\'wp_enqueue_scripts\',\'enqueue_parent_styles\');
add_action(\'wp_ajax_nopriv_lineChartCustom\', \'lineChartCustomCreate\');
add_action(\'wp_ajax_lineChartCustom\', \'lineChartCustomCreate\');

function lineChartCustomCreate(){

    if ( isset( $_POST[\'dataForPHP\'])){
        //echo data array
    echo $dataForPHP;
    //<script>Some chart generating script using the data array</script>
    }
}
?>

页面模板。php

<?php
    echo "<form id=\'my-form\'>
        Select Date Range:
        <input type=\'date\' name=\'date1\'>
        <input type=\'date\' name=\'date2\'>
        <input type=\'submit\' id=\'submit\' value=\'submit\'>
        </form>";
?>
<script>
        jQuery(\'#submit\').on(\'click\', function() {

            let formData = jQuery(\'#my-form\').serializeArray(); // retrieves the form\'s data as an array

           jQuery.ajax({
                     url: ajaxurl, // default ajax url of wordpress
                     type: \'POST\',
                     data: {
                         action: \'lineChartCustom\', // use this action to handle the event
                         dataForPHP: formData // this is your form\'s data that is going to be submitted to PHP by the name of dataForPHP                
                 });
             });
         });
</script>

2 个回复

SO网友:Antti Koskinen

您应该添加wp_die(); 在php函数的末尾。

但你也可以发送回复wp_send_json, wp_send_json_error 或wp_send_json_success. 这些函数还终止函数的执行。

SO网友:nmr

页面被刷新，因为您正在同步（传统）发送表单。要使用ajax发送表单，您的函数将连接到onclick 必须返回false 或致电.preventDefault() 提交事件时。

jQuery( "#my-form" ).submit(function( event ) {
    event.preventDefault();
    //
    // your code...
});

// --- or --- 

jQuery(\'#submit\').on(\'click\', function() {
    // ....
    return false;
});

编辑：将javascript代码移动到单独的文件中（例如。myscript.js). 使用在页面上包含该文件wp_enqueue_scripts() (hook). 在您使用的代码中ajaxurl 但你没有在任何地方定义它。wp_localize_script() 用于将值从php传递到javascript，这样您可以在中设置ajax的地址ajx_url 变量

页面模板。php：

<?php
echo "<form id=\'my-form\'>
    Select Date Range:
    <input type=\'date\' name=\'date1\'>
    <input type=\'date\' name=\'date2\'>
    <input type=\'submit\' id=\'submit\' value=\'submit\'>
    </form>";
?>

myscript。js公司：

jQuery(\'#submit\').on(\'click\', function() {

    let formData = jQuery(\'#my-form\').serializeArray(); // retrieves the form\'s data as an array

    jQuery.ajax({
        url: ajax_object.ajax_url, // default ajax url of wordpress
        type: \'POST\',
        data: {
            action: \'lineChartCustom\', // use this action to handle the event
            dataForPHP: formData // this is your form\'s data that is going to be submitted to PHP by the name of dataForPHP                
        }
    }).done(function( msg ) {
        alert( msg );
    });
    return false;
});

功能。php

add_action( \'wp_enqueue_scripts\', \'my_enqueue\' );
function my_enqueue() {

    wp_enqueue_script( \'my-javascript\', get_stylesheet_directory_uri(). \'/myscript.js\',  array(\'jquery\'), \'\', true );

    // in JavaScript, object properties are accessed as ajax_object.ajax_url
    wp_localize_script( \'my-javascript\', \'ajax_object\',
            array( \'ajax_url\' => admin_url(\'admin-ajax.php\') ) );
}

add_action(\'wp_enqueue_scripts\',\'enqueue_parent_styles\');
add_action(\'wp_ajax_nopriv_lineChartCustom\', \'lineChartCustomCreate\');
add_action(\'wp_ajax_lineChartCustom\', \'lineChartCustomCreate\');

function lineChartCustomCreate(){

    if ( isset( $_POST[\'dataForPHP\']) ){
        //echo data array
        print_r($_POST[\'dataForPHP\']);
    }
    die();
}

小码农CODE

无法成功执行AJAX脚本以调用函数.php特定的函数。使用XAMPP本地主机进行测试

相关推荐

如何为更好的链接创建php url重定向