JQuery POST值不更新数据库

时间:2012-06-07 22:50:36

标签: php ajax jquery wordpress-plugin

这是一个相对简单的wordpress插件,允许用户对列表中的项目进行投票。下面的代码应该执行以下操作:

  1. 添加短代码操作[Working]
  2. 创建表单以允许用户将新值发布到列表中(由短代码显示)[工作]
  3. 处理表单值[Working]
  4. 创建Javascript和JQuery以在特定点击[[Working]
  5. 上重新加载页面
  6. 执行更新数据库的AJAX回调函数。 [不工作]
  7. JQuery有一个成功函数,由事件触发。但是,没有新值发送到数据库,导致我认为它们之间存在问题:A)POST函数传递的变量,B)检索POST值的PHP,或者C)对AJAX的调用功能

    我永远不知道在JQuery中将引号和冒号放在AJAX函数中的哪个位置。我相信我正试图通过POST将“对象文字”传递给回调函数。我很遗憾为什么这不起作用。

    代码如下:

    /*
    *
    *
    SHORTCODE
    *
    *
    */
    
    add_shortcode('list-up-down', 'cb_lud_scfunc');
    
    function cb_lud_scfunc() {
    global $wpdb;
    $cb_lud_prefix = $wpdb->prefix;
    $cb_lud_table = $cb_lud_prefix . 'cb_list_up_down';
    $cb_lud_homeurl = home_url();
    $cb_lud_upimg = plugins_url('list-up-down/images/up-arrow.png', _FILE_);
    $cb_lud_downimg = plugins_url('list-up-down/images/down-arrow.png', _FILE_);
    $cb_lud_sample_query = $wpdb->query('SELECT * FROM '.$cb_lud_table);
    $cb_lud_field1_name = $wpdb->get_col_info('name',1);
    $cb_lud_field2_name = $wpdb->get_col_info('name',2);
    
    /*
    CREATE THE FORM
    */
    //Create the form to allow users to add records
        $cb_lud_sc_form = '
            <form id="list-up-down-form" name="list-up-down-form" action="" method="post">
            <table border="0">
                <tr>
                    <td><h2>'.$cb_lud_field1_name.':</h2><input id="field1_input" name="field1_input" type="text"></input></td>
                    <td><h2>'.$cb_lud_field2_name.':</h2><input id="field2_input" name="field2_input" type="text"></input></td>
                    <td valign="bottom"><input name="add_record" type="submit" value="Add Record" /></td>
                </tr>
            </table>
            </form>
            ';
    
    /*
    DEFINE HOW THE FORM HANDLES THE INPUT(S)
    */
    $field1_data = htmlspecialchars($_POST['field1_input'], ENT_QUOTES);
    $field2_data = htmlspecialchars($_POST['field2_input'], ENT_QUOTES);
    $up_votes = 0;
    $down_votes = 0;
    $new_data = array(
        $cb_lud_field1_name => $field1_data,
        $cb_lud_field2_name => $field2_data,
        'up_votes' => $up_votes,
        'down_votes' => $down_votes,
        );
    $format = array('%s', '%s', '%f', '%f');
    
    if (isset($field1_data) && !empty($field1_data) && isset($field2_data) &&!empty($field2_data)) {
        $wpdb->insert(
            $cb_lud_table, $new_data, $format
        );
    }
    
    /*
    DISPLAY THE LIST
    */          
    //Get the list from the database, and set the variables for display in the output.
    $get_list = $wpdb->get_results('SELECT entry_ID, '.$cb_lud_field1_name.' AS "field1", '.$cb_lud_field2_name.' AS "field2", up_votes, down_votes, up_votes - down_votes AS "total_votes"
        FROM '.$cb_lud_table.'
        GROUP BY entry_ID
        ORDER BY total_votes DESC
        ',OBJECT);
    
    //Check if list is null, and if so, set a variable to display a warning. Otherwise, display the list.
    if (empty($get_list)) {
        $cb_lud_sc_output .= "<em>Warning: You don't seem to have any records for this list. Why don't you add some now?</em>";
        $cb_lud_sc_output .= $cb_lud_sc_form;
        return $cb_lud_sc_output;
    }
    else {
        $cb_lud_sc_output .= $cb_lud_sc_form;
        $cb_lud_sc_output .= '</br>';
        $cb_lud_sc_output .= '<table id="cb_lud_list" border="1" cellpadding="10">';
        $cb_lud_sc_output .= '<tr><td align="center"><strong><a id="sort-by-field1" href="">'.$cb_lud_field1_name.'<a></strong></td><td align="center"><strong>'.$cb_lud_field2_name.'</strong></td><td align="center"><strong>Score</strong></td><td align="center"><strong>Vote Up/Down</strong></td></tr>';
            foreach ($get_list as $list_items) {
                $cb_lud_sc_output .= '<tr class="line-items-rows"><td>'.stripslashes($list_items->field1).'</td><td>'.stripslashes($list_items->field2).'</td><td>'.$list_items->total_votes.'</td><td><form id="up-down-arrows-form" action="" method="post"><input class="up-arrow" name="arrow-up-ID-'.$list_items->entry_ID.'" type="image" src="'.$cb_lud_upimg.'" value="'.$list_items->entry_ID.'"/>&nbsp;<input class="down-arrow" name="arrow-down-ID-'.$list_items->entry_ID.'" type="image" src="'.$cb_lud_downimg.'" value="'.$list_items->entry_ID.'"/></form></td></tr>';
                }
        $cb_lud_sc_output .= '</table>';
        return $cb_lud_sc_output;
    }
    };
    /*
    END SHORTCODE
    */
    
    /*
    *
    *
    JQUERY/AJAX for SHORTCODE
    *
    *
    */
    
    /*
    CREATE THE JAVASCRIPT/JQUERY
    */
    //Create the function that triggers on shortcode.
    add_action('cb_lud_scfunc', 'wp_enqueue_scripts');
    
    function cb_lud_scripts(){
    
    function cb_lud_action_javascript() {
    ?>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
    <script type='text/javascript' >
    
    $(document).ready(function(){
    //JQuery for the submission of a new list item.
        $('input.[class$="-arrow"]').click(function(e){
            e.preventDefault(); //put e in function.
            var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    
            if ($(this).hasClass('up-arrow')) {
                var arrowdirection = 'up';
                var entry = $(this).val();
            }
            else if ($(this).hasClass('down-arrow')) {
                var arrowdirection = 'down';
                var entry = $(this).val();
            }
    
            var data = {
                action: 'cb_lud_arrow_action',
                arrow: arrowdirection,
                entryID: entry
            };
    
            $.ajax ({
                type: 'POST',
                url: ajaxurl,
                data: data,
                success: function(){
                    alert('Thanks for the vote!'); //for debug. Alert is showing! Still not submitting data to database though.
                    $('.line-items-rows').fadeOut('fast').delay(1000).fadeIn('fast');
                }
            });
    });
    });
    
    </script>
    <?php
    //End Javascript function.  
    }
    
    //Call the javascript function
    cb_lud_action_javascript();
    
    /*
    *
    CREATE THE AJAX
    *
    */
    
    /*
    ARROW CALLBACK
    */
    
    if( is_admin() )
    {
    add_action('wp_ajax_cb_lud_arrow_action', 'cb_lud_arrow_callback');
    add_action('wp_ajax_nopriv_cb_lud_arrow_action', 'cb_lud_arrow_callback');
    
    }
    else{
    function cb_lud_arrow_callback(){       
        //Redefine basic variables
        global $wpdb;
        $cb_lud_prefix = $wpdb->prefix;
        $cb_lud_table = $cb_lud_prefix . 'cb_list_up_down';
    
        //New variables from POST
        $cb_lud_entry_id = $_POST['entry'];
        $cb_lud_arrow_direction = $_POST['arrowdirection'];
    
        if ($cb_lud_arrow_direction == 'up') {
            $wpdb->query('UPDATE '.$cb_lud_table.' SET up_votes=up_votes+1
            WHERE entry_ID='.$cb_lud_entry_id.'');
        }
    
        else if ($cb_lud_arrow_direction == 'down') {
            $wpdb->query('UPDATE '.$cb_lud_table.' SET down_votes=down_votes+1
            WHERE entry_ID='.$cb_lud_entry_id.'');
        }
    
    die(); // this is required to return a proper result
    }       
    }
    }
    add_action('wp_enqueue_scripts','cb_lud_scripts');
    

1 个答案:

答案 0 :(得分:0)

一个有效的解决方案是将'ajaxurl'设置为JQuery脚本中的页面URL:

var ajaxurl = '<?php echo the_permalink(); ?>';

然后将ajax中的url设置为相同:

var data = {
            action: 'cb_lud_arrow_action',
            arrow: arrowdirection,
            entryID: entry
        };
$.ajax ({
            type: 'POST',
            url: ajaxurl,
            data: data,
            success: function(data){
                alert('Thanks for the vote!'); //for debug. Alert is showing! Still not submitting data to database though.
                $('.line-items-rows').fadeOut('fast').delay(1000).fadeIn('fast');
            }
        });

这似乎有效,因为我希望JQuery仅在显示Shortcode时调用action函数。因此,我将JQuery函数挂钩到短代码中,以便它只在存在短代码的页面上触发。

现在值正在更新到数据库。