Question

我正在使用Ajax将输入的信息提交到textarea，并尝试让页面加载提交的字符串。我摆脱了错误并且正在显示成功功能，但结果未在页面上加载。我做错了什么？

            var dataString = tinyMCE.get('addAnswer').getContent();

            $.ajax({
                type: "POST",
                url: "/home/19/1/add_answer/",
                data: $(dataString).serialize(),
                success: function(data){
                    alert(dataString);
                },
                error: function(){
                    alert('You fail');
                }
            });

这是完整的代码：

$('#submitAnswer').on('click', function(e){
            e.preventDefault();
            var dataString = tinyMCE.get('addAnswer').getContent();


        // Next 3 functions are all for the csrf token
            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            var csrftoken = getCookie('csrftoken');

            function csrfSafeMethod(method) {
                // these HTTP methods do not require CSRF protection
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }
            function sameOrigin(url) {
                // test that a given url is a same-origin URL
                // url could be relative or scheme relative or absolute
                var host = document.location.host; // host + port
                var protocol = document.location.protocol;
                var sr_origin = '//' + host;
                var origin = protocol + sr_origin;
                // Allow absolute or scheme relative URLs to same origin
                return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
                    (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
                    // or any other URL that isn't scheme relative or absolute i.e relative.
                    !(/^(\/\/|http:|https:).*/.test(url));
            }
            $.ajaxSetup({
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
                        // Send the token to same-origin, relative URLs only.
                        // Send the token only if the method warrants CSRF protection
                        // Using the CSRFToken value acquired earlier
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            // End of csrf token functions

            $.ajax({
                type: "POST",
                url: "/home/19/1/add_answer/",
                data: $(dataString).serialize(),
                success: function(data){
                    alert(dataString);
                },
                error: function(){
                    alert('damn');
                }
            });
        });

Answer 1

选择页面内的任何html元素，以加载成功函数内收到的数据，如下所示。

$.ajax({
   type: "POST",
   url: "/home/19/1/add_answer/",
   data: $(dataString).serialize(),
   success: function(data){
             alert(dataString);
             $("#test").html(data); // replace 'test' with your selected element id
            },
   error: function(){
              alert('You fail');
            }
 });

Answer 2

根据$.serialize文档，dataString应该是一个表单对象。您的案例中的dataString似乎是一个原始字符串。在$.ajax中，data是urlencoded请求参数，或者是（通过jquery）转换为urlencoded请求参数的对象。您的代码应该看起来像这样：

var dataString = tinyMCE.get('addAnswer').getContent();
$.ajax({
    type: 'POST',
    url: '/home/19/1/add_answer/',
    data: {textData: dataString},
    success: function(data){
                alert(dataString);
            },
    error: function(){
                alert('You fail');
            }
});

在服务器端，数据将作为POST参数发送，密钥为“textData”。

它也可能更短/更容易使用$.post，如下所示：

var dataString = tinyMCE.get('addAnswer').getContent();
$.post('/home/19/1/add_answer/', textData: dataString, function(data) {
    alert(dataString);
    // or do something with the response from the server (data)
});

Ajax POST请求不显示内容

2 个答案: