Question

我正在创建一个自定义wordpress插件，它有一个前端形式，我希望使用AJAX将数据发送到数据库，并返回响应以更新前端表。

一切看起来都不错，直到我点击＆＃34;提交＆＃34;按钮

所以我的AJAX是：

$('#form').submit(function(event) {

    var formData = {
        'user'              : $('input[name=userid]').val(),
        'cardname'             : $('input[name=card]').val(),
        'setname'             : $('input[name=setname]').val(),
        'quantity'    : $('input[name=quantity]').val(),
        'multiverseid'    : $('input[name=multiverseid]').val()
    };

    // process the form
    $.ajax({
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : ''+base_url+'/website/wp-content/plugins/test/public/js/process.php', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'html', // what type of data do we expect back from the server
        encode          : true,
        success : function(updatedTable) {
            $('div#tableHolder').html(updatedTable);
        }
    })

       });

 // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();

   });
});

将添加数据的process.php文件是：

global $wpdb;

$wpdb->insert( 
'wp_mycards', 
array( 
    'user' => $_POST[userid], 
    'cardname' => $_POST[cardname],
     'setname' => $_POST[setname],
     'quantity' => $_POST[quantity],
     'multiverseid' => $_POST[multiverseid] 

     )
 );



$data="<table><tr><td>Image</td><td>Name</td><td>Set</td><td>Quantity</td></tr>";

$user_ID = get_current_user_id();
$cards = $wpdb->get_row( "SELECT * FROM $wpdb->wp_mycards WHERE user = ".$user_ID."" );

while ($row = mysql_fetch_assoc($cards)) { 

    $data.='<tr><td align="center"><img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid='.$row[multiverseid].'&type=card" width="30" height="42" /></td><td align="left">'.$row[cardname].'</td><td align="center">'.$row[setname].'</td><td align="center">'.$row[quantity].'</td></tr>';

  }

 $data.="</table>";

 echo $data;

- 我在firefox运行它，在firebug它给我500个内部服务器错误 - 帖子值很好

Answer 1

AJAX在WordPress中有点不同。就像在后端使用AJAX一样，WordPress已经准备好使用ajax，你只需要使用正确的函数。

在WordPress中，每个AJAX请求都通过wp-admin文件夹中的admin-ajax.php文件，你需要一些操作来挂钩它。 AJAX请求URL应指向此文件。在此阅读完整的如何操作的教程：https://premium.wpmudev.org/blog/using-ajax-with-wordpress/

一开始看起来有点复杂，一旦得到它就买不太难。您将需要此功能：

wp_ajax_my_action

wp_ajax_nopriv_my_action

wp_localize_script

Answer 2

$('#form').submit(function(event) {

    event.preventDefault();
    var formData = {
        'user'              : $('input[name=userid]').val(),
        'cardname'             : $('input[name=card]').val(),
        'setname'             : $('input[name=setname]').val(),
        'quantity'    : $('input[name=quantity]').val(),
        'multiverseid'    : $('input[name=multiverseid]').val()
    };

    // process the form
    $.ajax({
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : 'http://example.com/wordpress/process.php', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'html', // what type of data do we expect back from the server
        encode          : true,
        success : function(updatedTable) {
            //alert(updatedTable);
            $('div#tableHolder').html(updatedTable);
        }
    })

       });

AND in process.php

global $wpdb;


$wpdb->insert( 
'wp_mycards', 
 array( 
    'user' => $_POST['user'], 
    'cardname' => $_POST['cardname'],
    'setname' => $_POST['setname'],
    'quantity' => $_POST['quantity'],
    'multiverseid' => $_POST['multiverseid'] 

     )
 );



$data="<table><tr><td>Image</td><td>Name</td><td>Set</td>     <td>Quantity</td></tr>";

$user_ID = $_POST['user'];

$cards = $wpdb->get_row( "SELECT * FROM wp_mycards WHERE user = ".$user_ID."" );

$data.='<tr><td align="center"><img src="http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid='.$cards->multiverseid.'&type=card" width="30" height="42" /></td><td align="left">'.$cards->cardname.'</td><td align="center">'.$cards->setname.'</td><td align="center">'.$cards->quantity.'</td></tr>';


 $data.="</table>";

 echo $data;

WordPress前端AJAX表单提交提供500内部服务器错误

2 个答案: