What is a promise in Javascript?

Question

Ivxn

Asked: 2020-11-18 10:41:46 +0800 CST 2020-11-18 10:41:46 +0800 CST 2020-11-18 10:41:46 +0800 CST

JQuery 自动完成不返回 ñ 但 HTML 实体 Ñ

772

我在使用 JQuery 自动完成库的文本框中显示匹配内容时遇到问题，因为我的文本有ñ并放置了奇怪的符号，我认为它没有很好地解码我的文本，但我不知道如何更正这个问题。

我对返回匹配结果的页面进行 AJAX 调用，我觉得问题出在 AJAX 中：

<script>
    $(document).ready(function () {
        $("#btnBusca").css({ 'display': 'none' });
        $("#filtroBusqueda").change(function () {
            var op = $(this).val();

            switch (op) {

                case "rs":
                    $("#rs").css({ 'display': 'block' });
                    $("#ln").css({ 'display': 'none' });
                    $("#nc").css({ 'display': 'none' });
                    $("#btnBusca").css({ 'display': 'block' });
                    break;
                case "ln":
                    $("#ln").css({ 'display': 'block' });
                    $("#rs").css({ 'display': 'none' });
                    $("#nc").css({ 'display': 'none' });
                    $("#btnBusca").css({ 'display': 'block' });
                    break;
                case "nc":
                    $("#nc").css({ 'display': 'block' });
                    $("#rs").css({ 'display': 'none' });
                    $("#ln").css({ 'display': 'none' });
                    $("#btnBusca").css({ 'display': 'block' });
            }
        });

        $("#txtRazon").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "post",
                    url: "coincidenciaRazonSocial",                    
                    dataType: "json",
                    data: {
                        q: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.nombre,
                                value: item.nombre,
                            }
                        }));
                    }
                });
            }
        });

    });
</script>
<div>
    <h5><span class="glyphicon glyphicon-th"></span> Búsqueda</h5>
    <form id="formularoBuscar" method="post" class="form-horizontal " action="#">

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-group">
                    <label class="col-lg-1 control-label">Filtro</label>
                    <div class="col-lg-11">
                        <select name="filtroBusqueda" id="filtroBusqueda" class="form-control">
                            <option value="" disabled selected>Seleccione Opción</option>
                            <option value="rs"> x Razón social</option>
                            <option value="ln">x Línea</option>
                            <option value="nc">x Número cuenta</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div id="rs" style="display: none">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-1 control-label">Razón social</label>
                        <div class="col-lg-11">
                            <input type="text" class="form-control" id="txtRazon" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="ln" style="display: none">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-1 control-label">Número telefonico</label>
                        <div class="col-lg-11">
                            <input type="text" class="form-control" id="txtTelefono" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="nc" style="display: none">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-1 control-label">Número cuenta</label>
                        <div class="col-lg-11">
                            <input type="text" class="form-control" id="txtCuenta" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="form-group" id="btnBusca">
                    <label class="col-lg-1 control-label"></label>
                    <div class="col-lg-11">
                        <button type="button" id="btnBuscarAdenda">Buscar</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

我返回的 json

3 Answers

Voted

Mariano · Answer 1 · 2020-11-18T11:25:20+08:00

如图所示，这不是 UTF 编码的问题，而是./coincidenciaRazonSocial从自动完成 ( ) 文件中接收到 HTML 实体。在的情况下Ñ，编码为Ñ。

为了修复它，我们可以在这部分代码中修改 AJAX 收到的响应：

success: function (data) {
    response($.map(data, function (item) {
        return {
            label: item.nombre,
            value: item.nombre,
        }
    }));
}

调用函数进行解码：

success: function (data) {
    response($.map(data, function (item) {
        var nombreDecodificado = decodificarEntidadesHTMLNumericas(item.nombre);
        return {
            label: nombreDecodificado,
            value: nombreDecodificado
        }
    }));
}

并使用以下函数将任何十进制实体转换为其对应的字符：

function decodificarEntidadesHTMLNumericas(texto) {
    return texto.replace(/&#(\d{1,8});/g,function (m, ascii) {
        return String.fromCharCode(ascii);
    });
}

注意：此功能仅适用于十进制数字实体，如图像 ( Ñ) 所示的实体，不能替代其他数字实体，如á,>或Σ(十六进制)。

举个例子，我上传了一个包含 3 个项目（和）的文本文件"DISEÑO 01"，我们将通过 AJAX 获得：..02..03

$(document).ready(function () {
    $("#txtRazon").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: "post",
                url: "http://mariano.freevar.com/34461/coincidenciaRazonSocial.txt",                    
                dataType: "json",
                data: {
                    q: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        var nombreDecodificado = decodificarEntidadesHTMLNumericas(item.nombre);
                        return {
                            label: nombreDecodificado,
                            value: nombreDecodificado
                        }
                    }));
                }
            });
        }
    });

});

function decodificarEntidadesHTMLNumericas(texto) {
    return texto.replace(/&#(\d{1,8});/g,function (m, ascii) {
        return String.fromCharCode(ascii);
    });
}

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- HTML -->
<div>
    <h5><span class="glyphicon glyphicon-th"></span> Búsqueda</h5>
    <form id="formularoBuscar" method="post" class="form-horizontal " action="#">
        <div id="rs" style="display: block">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="col-lg-1 control-label">Razón social</label>
                        <div class="col-lg-11">
                            <input type="text" class="form-control" id="txtRazon" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Marcos · Answer 2 · 2020-11-18T11:27:47+08:00

Marcos

2020-11-18T11:27:47+08:002020-11-18T11:27:47+08:00

由于记录在 json 中编码为HTML 实体，因此我可以想到 2 种可能的解决方案

修补jQuery Autocomplete它，使其使用labelas HTML(innerHTML) 而不是texto(innerText) 的值。

在doc中，有一个指向Scott González 的扩展程序的链接。

在将它们发送回去之前对其进行解码。

在coincidenciaRazonSocial中，您应该：

该名称未在 DB 中编码：检查您是否未对nombre. 例如：

//PHP
$empresa['nombre'] = htmlentities($empresa['nombre']); // No hacer esto

// ASP.NET
Dim nombre As String = System.Web.HttpUtility.HtmlEncode(nombreEmpresa) // No hacer esto

名称在数据库中编码：所以你应该解码它们。例如：

// PHP
$empresa['nombre'] = html_entity_decode($empresa['nombre']); // decode el nombre

// ASP.NET
Dim nombre As String = System.Web.HttpUtility.HtmlDecode(nombreEmpresa)

2

John Lopez · Answer 3 · 2020-02-17T06:42:18+08:00

John Lopez

2020-02-17T06:42:18+08:002020-02-17T06:42:18+08:00

就我而言，我正在使用 CodeIgniter 和 Jquery，对我有用的是使用以下方法

public function autocompletar($q){
$this->db->select('*');
$this->db->like('nombre', $q);
$query = $this->db->get('empresa');
if($query->num_rows() > 0){
  foreach ($query->result_array() as $row){
    $new_row['label']=htmlspecialchars(stripslashes($row['nombre']));
    $new_row['value']=htmlentities(stripslashes($row['id']));
    $row_set[] = $new_row; //build an array
  }
  echo json_encode($row_set); //format the array into json data
}
}

在标签中我使用了htmlspecialchars并解决了这个问题。

干杯

0

JQuery 自动完成不返回 ñ 但 HTML 实体 Ñ

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?