如何在jQuery中实现页面加载、下拉选择、输入触发AJAX的业务逻辑

完整实现代码 #

首先修正你原有HTML的小错误：Action选项的闭合标签缺失，修正后如下：

<form> 
 <input type="text" name="psrn" id="prsnvl"> 
 <select id="prsnchs"> 
   <option value="0">Action</option>
    <option value="1">Drama</option>
    <option value="2">Horror</option>
  </select>
</form>

jQuery脚本调整 #

我们将重复的AJAX逻辑封装为公共函数减少冗余，同时按优先级处理触发逻辑，完整代码如下：

jQuery(document).ready(function($){
    // 封装公共AJAX请求函数
    // isRandom: 是否请求随机视频，keyword: 输入框搜索关键词
    function fetchVideo(isRandom = false, keyword = '') {
        const ajax_url = plugin_ajax_object.ajax_url;
        const data = {
            action: 'myaction',
            adSlct: $('#prsnchs').val(), // 始终携带下拉框选中值作为必填参数
            is_random: isRandom ? 1 : 0,
            search_key: keyword
        };

        $.ajax({
            url: ajax_url,
            type: 'post',
            data: data,
            success: function(response) {
                $('#dyanmic-content').html(response);
            }
        });
    }

    // 1. 页面加载完成自动请求随机视频
    fetchVideo(true);

    // 2. 第一优先级：下拉框选中值变更触发请求
    $('#prsnchs').on('change', function(e) {
        e.preventDefault();
        fetchVideo(false, '');
        // 可选：清空输入框避免优先级冲突
        $('#prsnvl').val('');
    });

    // 3. 第二优先级：输入框有内容时点击页面其他位置触发
    $(document).on('click', function(e) {
        // 排除点击下拉框、输入框本身的场景
        if($(e.target).is('#prsnchs') || $(e.target).is('#prsnvl')) {
            return;
        }
        const inputVal = $('#prsnvl').val().trim();
        if(inputVal) {
            fetchVideo(false, inputVal);
        }
    });
});

后端适配说明 #

PHP接口端可以通过$_POST获取三个参数：

• is_random：值为1时返回随机视频
• adSlct：下拉框选中的分类值，必填
• search_key：输入框传入的搜索关键词
  按自身业务逻辑处理后返回前端需要的内容即可。

内容的提问来源于stack exchange，提问作者backbencher