Ajax函数：

Question

我创建了一个ajax方法来搜索用户列表。但是ajax函数返回我，例如：

 <ul><li>User Name</li></ul>

我想修剪主页上的<ul></ul>和<li></li>标签以使用确切的值。
喜欢：

之前：

<ul><li>User Name</li></ul>

之后：

用户名

ajax结果将存储在：

<div class="input-group" id="userList"></div>

我已经做到了一些javascript方法

Ajax函数：

< script >
    $(document).ready(function() {
    $('#run').keyup(function() {
        var query = $(this).val();
        if (query != '') {
            $.ajax({
                url: "userSearch.php",
                type: "POST",
                data: {
                    query: query
                },
                success: function(data) {
                    $('#userList').fadeIn();
                    $('#userList').html(data);
                    paymentStatus(data);
                }
            });
        } else {
            $('#userList').fadeOut();
        }
    });
    $(document).on('click', 'li', function() {
        $('#run').val($(this).text());
        $('#userList').fadeOut();
    });
    }); <
/script>

userSearch.php文件代码：

<?php
require_once '../../config/config.php';
if(isset($_POST['query']))
{
    $output = '';
    $query = "SELECT Name, Id FROM ucoe_users WHERE Name LIKE '%".$_POST['query']."%' AND RoleId = 3";
    $result = mysqli_query($connection, $query);
    $output = '<ul>';
    if(mysqli_num_rows($result)> 0 )
    {
        while($row = mysqli_fetch_array($result))
        {
            $output .= "<li>".$row['Name']."</li>";
        }
    }
    else
    {
        $output .= '<li>User Not Found</li>';
    }
    $output .= "</ul>";
    echo $output;
}
?>

Answer 1

使用$(html).text()从HTML中获取文本值

           success: function(data) {
                $('#userList').fadeIn();
                $('#userList').html($(data).text());
                paymentStatus(data);
            }

var html = '<ul><li>User Name</li></ul>';

console.log($(html).text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您可以按照以下方式使用jQuery，

    var arrOfValues = [];
    $('ul li').each(function(i)
    {
       arrOfValues.push($(this).text()); //every value of ul li will be push in arrOfvalues.

    });
$('#userList').fadeOut();

Answer 3

如果它是一个DOM元素，那么直接获取innerText

例如：

<ol>
<li>User Name</li>
</ol>

<script>
var olDom = document.getElementsByTagName("ol");
console.log(olDom[0].innerText)
</script>

但是在您的情况下，您将HTML作为Ajax的响应，因此首先我们需要创建一个包装器div，以DOM形式保存您的响应，然后我们将调用innerText。

<script>
var wrapperDiv = document.createElement('div');
wrapperDiv.innerHTML = data;
$('#userList').html(wrapper.innerText);
</script>

如何修剪<ul>和<li>标记，但<li>的值将保持不变？

Ajax函数：

userSearch.php文件代码：

3 个答案: