$.ajax({}) 中的 URI 太大答案

【问题标题】：URI Too Large in $.ajax({})$.ajax({}) 中的 URI 太大
【发布时间】：2019-12-19 04:37:26
【问题描述】：

我有需要将图像加载到<img> 标记的文本区域。然后，我想将文本区域的内容发布到generate_pdf.php 以生成pdf。当我通过$.ajax({}) 发布文本区域内容时，我遇到了URI Too Largeerror。

提交按钮$().on("click",function(){})中的方法1-$.ajax({})

<?php
//image from sql
 $image         =$array_image[0]['file'];
 $encode_img        ='"data:image/jpeg;base64,'.base64_encode($image).'"';
?>
<!DOCTYPE html>
<html>
<head>
<script src="../../library/jquery/jquery-3.4.1.min.js"></script>
    <script>

        $( document ).ready(function() 
        {
            let hd = document.createElement('div'); // Create new DIV
              hd.style.display = "none";    // Hide new DIV
              hd.innerHTML = document.querySelector('#ta').value; // set its innerHTML to textarea's
              document.body.prepend(hd); // Add to body
              document.querySelector('#test').src   = <?php echo $encode_img;?>;
              document.querySelector('#ta').value   = hd.innerHTML;
              content   =$('#ta').val();
              $('#test').src                        = <?php echo $encode_img;?>;
                    //submitted uri too large 
                    //-(<form id="text_editor" name="text_editor" >)
                    $('#pdf').on("click",function() 
                    {   
                        $.ajax({
                                type:"POST",
                                url :"generate_pdf.php",
                                data:{                          
                                        'pdf    '           :content,                                                               
                                     }
                                ,
                                success:function(data)
                                {   
                                    alert('successfully posted!');                  
                                    $('#content').html(data);                                       
                                }
                            });         
                    })
        })
    </script>
</head>
<body>

<form id="test_img" name="test_img" >
    <textarea id="ta" name="ta">
        <img alt="test" id="test">
    </textarea>     
    <input type="submit" value="Submit" name="pdf" id="pdf">
</form>
<div id="content" name="content"></div>
</body>
</html>

然后，我尝试在$().submit(function(event){}) 中使用$.post。这能够提交而不会出现此错误。

方法2-$.post中$().submit(function(event){})的形式

 <?php
    //image from sql
    $image          =$array_image[0]['file'];
    $encode_img     ='"data:image/jpeg;base64,'.base64_encode($image).'"';
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <script src="../../library/jquery/jquery-3.4.1.min.js"></script>
        <script>

            $( document ).ready(function() 
            {
                let hd = document.createElement('div'); // Create new DIV
                  hd.style.display = "none";    // Hide new DIV
                  hd.innerHTML = document.querySelector('#ta').value; // set its innerHTML to textarea's
                  document.body.prepend(hd); // Add to body
                  document.querySelector('#test').src   = <?php echo $encode_img;?>;
                  document.querySelector('#ta').value   = hd.innerHTML;
                  content   =$('#ta').val();             
                        $("#test_img").submit(function(event)
                        {                       
                            event.preventDefault();
                            var $form   = $( this ),
                            url         = $form.attr( 'action' );
                            var posting = $.post( url, { pdf:content} );
                            posting.done(function( data ) 
                            {
                                $('#content').html(data);
                          });
                        })  
            })
        </script>
    </head>
    <body>

    <form id="test_img" name="test_img" method="POST" action="generate_pdf.php" >
        <textarea id="ta" name="ta">
            <img alt="test" id="test">
        </textarea>

        <input type="submit" value="Submit" name="pdf" id="pdf">
    </form>
    <div id="content" name="content"></div>
    </body>
    </html>

$.post是$.ajax的简写。但是，为什么方法2能提交成功而第一种方法不能呢？在方法 1 中，我们发布的数据内容包含在 url 中。但是，在第二种方法中，不包括在内。提前致谢。

【问题讨论】：

你应该使用FormData来上传大数据。
感谢您的回复。在我添加var formData = new FormData(); formData.append('pdf', content); 并将formData 传递给ajax 后仍然出现该错误。

标签： javascript jquery ajax

【解决方案1】：

在$('#pdf').on("click",function() {}) 中添加preventDefault() 方法解决了错误URI Too Large。

preventDefault() 方法阻止用户对选定元素执行默认操作。该方法不接受任何参数，有两种工作方式：

它阻止链接跟随 URL，使浏览器无法转到另一个页面。
它阻止提交按钮提交表单。

代码：

$('#pdf').on("click",function(e) 
{
        e.preventDefault();
        $.ajax({
                type:"POST",
                url :"index_debug_uritoolarge_2.php",
                data:{  
                    pdf :$('#ta').val(),
                },
                success: function(data)
                                {   
                                    alert('successfully posted!');                  
                                    $('#content').html(data);
                                }
                            });         
                    })

参考：post_textarea_content_in_ajax

【讨论】：