title: URI Too Large in $.ajax({})
body: <p>I have text area where I need to load image to <code>&lt;img&gt;</code> tag. Then, I want to post content of text area to <code>generate_pdf.php</code> to generate pdf. I have encauntered <code>URI Too Large</code>error when I post text area content by <code>$.ajax({})</code>.</p>
  
  <p><strong>Method 1-<code>$.ajax({})</code> in <code>$().on("click",function(){})</code> of submit button</strong></p>
  
  <pre><code>&lt;?php
  //image from sql
   $image         =$array_image[0]['file'];
   $encode_img        ='"data:image/jpeg;base64,'.base64_encode($image).'"';
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="../../library/jquery/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          $( 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   = &lt;?php echo $encode_img;?&gt;;
                document.querySelector('#ta').value   = hd.innerHTML;
                content   =$('#ta').val();
                $('#test').src                        = &lt;?php echo $encode_img;?&gt;;
                      //submitted uri too large 
                      //-(&lt;form id="text_editor" name="text_editor" &gt;)
                      $('#pdf').on("click",function() 
                      {   
                          $.ajax({
                                  type:"POST",
                                  url :"generate_pdf.php",
                                  data:{                          
                                          'pdf    '           :content,                                                               
                                       }
                                  ,
                                  success:function(data)
                                  {   
                                      alert('successfully posted!');                  
                                      $('#content').html(data);                                       
                                  }
                              });         
                      })
          })
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form id="test_img" name="test_img" &gt;
      &lt;textarea id="ta" name="ta"&gt;
          &lt;img alt="test" id="test"&gt;
      &lt;/textarea&gt;     
      &lt;input type="submit" value="Submit" name="pdf" id="pdf"&gt;
  &lt;/form&gt;
  &lt;div id="content" name="content"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then , I tried using <code>$.post</code> in <code>$().submit(function(event){})</code>. This able to submit without this error. </p>
  
  <p><strong>Method 2-<code>$.post</code> in <code>$().submit(function(event){})</code> of form</strong></p>
  
  <pre><code> &lt;?php
      //image from sql
      $image          =$array_image[0]['file'];
      $encode_img     ='"data:image/jpeg;base64,'.base64_encode($image).'"';
      ?&gt;
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;script src="../../library/jquery/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
  
              $( 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   = &lt;?php echo $encode_img;?&gt;;
                    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);
                            });
                          })  
              })
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;form id="test_img" name="test_img" method="POST" action="generate_pdf.php" &gt;
          &lt;textarea id="ta" name="ta"&gt;
              &lt;img alt="test" id="test"&gt;
          &lt;/textarea&gt;
  
          &lt;input type="submit" value="Submit" name="pdf" id="pdf"&gt;
      &lt;/form&gt;
      &lt;div id="content" name="content"&gt;&lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><code>$.post</code> is  a shorthand for <code>$.ajax</code>.But, why method 2 able to submit successfully and first method could not? In method 1, content of data that we posting included in url. But, in second method, not included. Thanks in advance.</p>