javascript之使用一个 jQuery AJAX 表单(或响应)返回两个数据库结果

daizhj 阅读:36 2025-12-25 22:24:30 评论:0

我有什么:

我有一个表单,它使用 jQuery AJAX 查询数据库并返回一系列 <option>附加到 <select> 的元素元素。

我需要什么:

使用相同的表单,我需要在相同数据库中的不同表上运行第二个查询,这将确定在单选按钮组中选中哪个单选按钮。通过 AJAX 发送 URN 以返回应选择哪个单选按钮。

我的代码:

HTML:

<form type="post" method="post" action="<?php $_SERVER['PHP_SELF']; ?>" id="adddetailstoanexistingclient_form" name="adddetailstoanexistingclient_form"> 
 
    <input type="hidden" id="sendingclienturn_js" name="sendingclienturn_js"/> 
 
    <select id="factivity_buildproject_a" name="factivity_buildproject_a"> 
        <option selected="selected"></option> 
        <!--AJAX HTML RESULTS GO HERE--> 
        <option value = "Build / Project non-specific">Build / Project non-specific</option> 
    </select> 
 
    <input type="radio" name="factivity_prospectstrength" value="1" /> 1 
    <input type="radio" name="factivity_prospectstrength" value="2" /> 2 
    <input type="radio" name="factivity_prospectstrength" value="3" /> 3 
    <input type="radio" name="factivity_prospectstrength" value="4" /> 4 
    <input type="radio" name="factivity_prospectstrength" value="5" /> 5 
 
    <input type="hidden" name="action" value="buildorprojects_ajax"/> 
 
</form> 

jQuery/AJAX:

$('#sendingclienturn_js').on('change keyup paste input',ajaxSubmit);             
 
function ajaxSubmit(){ 
 
    var adddetailstoanexistingclient_form = $('#adddetailstoanexistingclient_form').serialize(); 
 
    $.ajax({ 
        type:"POST", 
        url: "<?php echo admin_url('admin-ajax.php'); ?>", 
        data: adddetailstoanexistingclient_form, 
        success:function(data){ 
 
            if (!$.trim(data)){ 
            $('#factivity_buildproject_a').hide();  
            $('[name=factivity_buildproject_ro]').show(); 
            } 
            else{ 
                $('#factivity_buildproject_a').show();  
                $('[name=factivity_buildproject_ro]').hide(); 
            } 
 
            $("#factivity_buildproject_a option.filterable_option").remove();    
            $("#factivity_buildproject_a option:first").after(data); 
 
        }, 
        error: function(errorThrown){ 
            alert(errorThrown); 
            alert("There is an error with AJAX!"); 
        }                    
    });  
 
    return false; 
 
} 

PHP:

function buildorprojects_ajax(){ 
 
    global $wpdb; 
    $sendingclienturn_js = $_POST['sendingclienturn_js']; 
 
    $query_buildsorprojects = $wpdb->get_results(  
        " 
        SELECT *  
        FROM wp_crm_bplist 
        WHERE clienturn = '$sendingclienturn_js' 
        AND deleted <> '1' 
        ORDER BY buildorproject, recorddateandtime DESC 
        " 
    ); 
 
    if($query_buildsorprojects===FALSE){ 
        echo "Error";   
    } 
    else { 
        foreach ( $query_buildsorprojects as $query_buildorproject ) { 
            echo '<option class="filterable_option" value="'.$query_buildorproject->recordurn.'"  data-clienturn="'.$query_buildorproject->clienturn.'">'.$query_buildorproject->buildprojecturn.' - '.$query_buildorproject->buildorproject.' ('.$query_buildorproject->buildorprojecttype.')</option>'; 
        }    
 
    } 
    die(); 
} 
add_action('wp_ajax_buildorprojects_ajax', 'buildorprojects_ajax'); 
add_action('wp_ajax_nopriv_buildorprojects_ajax', 'buildorprojects_ajax'); 

我尝试过的:

我复制了上面的代码(HTML、jQuery AJAX 和 PHP),更改了 ids、名称、函数和变量的必要标题,这些标题有效,但代价是我的第一个 AJAX 函数失败。

我推断问题是在将第二个隐藏字段添加到 HTML 代码时发生的。第二个 AJAX 表单提交打破了第一个表单的提交。

适用于一个隐藏字段:

<input type="hidden" name="action" value="buildorprojects_ajax"/> 

不适用于第二个隐藏字段:

<input type="hidden" name="action" value="buildorprojects_ajax"/> 
<input type="hidden" name="action" value="prospectstrength_ajax"/> 

请您参考如下方法:

是的,您可以将两个片段编码为一个响应。然后您需要做的就是将响应解码为两段。这可以使用 substr 来完成,但由于这是 AJAX,您可能只是想创建一个数组并对它进行 json_encode,因此在 json 解码后您必须得到两个字符串。

或者:

如果您想与要传递的多个数据段共享相同的响应,您可以借助 JSON 和 PHP 的全局静态状态创建多个段。

JSON 应该很方便,因为大多数 AJAX javascript 例程都可以直接解析它。

另一方面,全局静态 static 在 Wordpress 中大量使用,因此您不会破坏它。

例如,您可以在不同的位置添加到响应中:

function ajax_callback_red() { 
    ... 
    JsonResponse::add('<options/>'); 
} 
 
function ajax_callback_green() { 
    ... 
    JsonResponse::add('<checkboxes/>'); 
} 

当请求完成时,JsonResponse(这里是静态访问)可以将其转换为 JSON:

[ 
    "<options\/>", 
    "<checkboxes\/>" 
] 

这样的代码可以很快写出来。使用类析构函数或注册一些关闭操作:

class JsonResponse 
{ 
    static $instance; 
 
    private $segments = array(); 
 
    /** 
     * conditionally assign class instance to global variable and 
     * return it. 
     * 
     * @return JsonResponse 
     */ 
    public static function getInstance() { 
        self::$instance || self::$instance = new self; 
        return self::$instance; 
    } 
 
    public static function add($segment) { 
        self::getInstance()->addSegment($segment); 
    } 
 
    public function addSegment($segment) { 
        $this->segments[] = $segment; 
    } 
 
    public function __destruct() { 
        echo json_encode($this->segments, JSON_PRETTY_PRINT); 
        die(); 
    } 
} 

希望这有帮助。


标签:ajax
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号