使用AJAX和Jquery从服务器请求数据

Question

我需要创建一个脚本，从表单中获取数据，并将其发送到服务器(上面有一些邪恶的C#过程，这不是我的工作……)，服务器解析这个字符串并用4个字符串(是的，它们是西班牙语)回复我：'pendiente'，'verificada'，'rechazada'，最后是'error‘，现在，我必须得到这个响应，并正确显示正确的消息(隐藏-内联html)。所有这些过程都不应该“刷新”实际页面，因此我将使用AJAX进行此操作。

记住，我是个新手:)我学习Jquery就是为了这个任务，我不得不说我对此很满意。

问题所在

我不知道如何使用Jquery处理或“操作”该请求.我想到了如何将数据发送到服务器，但我认为我处理的响应不正确。

守则：

在本例中，我已经修改了脚本，每个不同的响应都应该有自己的边框颜色，我使用条件(它们肯定是错误的)向#ajax div添加CSS类。

所以，它可能有愚蠢的错误..。

$(document).ready(function () {
    $('#enviar').click(function (event) {
        event.preventDefault(); //avoid page refresh

       var consulta = $('#string').val();
       $("#normal").text(consulta);

//Start AJAX!        
        $.ajax({
            async: true,
            cache: false,
            type: 'post',
            url: 'http://184.22.97.218:8081/chequeostatusdonation', //la del servr
            data: {
                html: consulta
            },
            dataType: 'html',
            beforeSend: function () {
                console.log('Sending...');
            },
            success: function (data) {
                console.log('Just sent -'+data+'- with success dooh');
                $('#ajax').html(data);
                //start conditional
        if (data == pendiente) {
            $("#ajax").addClass(pendiente);
        } else if (data == verificada) {
            $("#ajax").addClass(verificada);
        } else if (data == rechazada) {
            $("#ajax").addClass(rechazada);
        } else {
            $("#ajax").html('<h1>error</h1>');
        }
            //end condicional
            },
            complete: function () {
                console.log('Listo el pollo');
            }
        });
    });
});

这是JSFiddle

编辑:现在，我刚刚找到了以下两个链接--learn.jquery.com/code-organization/ learn.jquery.com/code-organization/beware-anonymous-functions/

去我的代码！:D

Answer 1

在默认情况下，异步是"true"，所以您不需要在代码中提到这一点。

您包括到服务器的链接(在URL-字段中)，但是您要打开的文件是什么？您需要包含从哪里获取数据的路径(文件/脚本)。要使Ajax工作，您需要尊重“相同的来源策略”，这样您就可以插入文件/脚本的相对路径。

您调用的响应是否总是带有其中一个关键词('pendiente‘、'verificada’、'rechazada‘或’error‘)的短字符串?在这种情况下，我将使用"text“而不是"html”作为dataType，因为jQuery将尝试将其解析为DOM-结构，这不是您想要的。

您的if-语句(以及类赋值)也无法工作，因为您试图将其与一个非激进型变量进行比较，而不是使用该值的字符串。你应该在你的字符串周围使用“或”来解决这个问题。

这段代码应该能用。如果没有，请告诉我。包括浏览器控制台中给出的错误。

$(document).ready(function () {
    $('#enviar').click(function (event) {
        event.preventDefault(); //avoid page refresh

       var consulta = $('#string').val();
       $("#normal").text(consulta);

        //Start AJAX!        
        $.ajax({
            type: 'POST',
            cache: false,
            url: 'RELATIVE_PATH_HERE', //la del servr
            data: {
                html: consulta
            },
            dataType: 'text',
            beforeSend: function () {
                console.log('Sending...');
            },
            success: function (data) {
                console.log('Just sent -'+data+'- with success dooh');
                $('#ajax').html(data);
                //start conditional
             if (data === 'pendiente') {
               $("#ajax").addClass('pendiente');
             } else if (data === 'verificada') {
               $("#ajax").addClass('verificada');
             } else if (data === 'rechazada') {
               $("#ajax").addClass('rechazada');
             } else {
               $("#ajax").html('<h1>error</h1>');
            }
            //end condicional
            },
            complete: function () {
                console.log('Listo el pollo');
            },
            error: function() {
                console.log('Problem with XHR-request');
        });
    });
});

如果您处理多个Ajax调用(因为它们将添加到对方上)，请小心使用.addClass。