title: How to solve Error 400 on html page post method
body: <p>I have make a simple html file to get my data and add button to post data but however i am returning error 400</p>
  <p>My get method are running fine with displaying the backend data out in the html but however post method i am returning some errors 400 due to my query which i not sure why is there any way i can prevent this error 400 ?</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Add recycables&lt;/title&gt;
          &lt;!-- Stylesheet --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;/&quot;&gt;
  
          &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js&quot; integrity=&quot;sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://code.jquery.com/jquery-1.12.4.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id = &quot;add&quot;&gt;&lt;/div&gt;
          &lt;P&gt;Add recycables&lt;/P&gt;
          &lt;p&gt;name: &lt;input type=&quot;text&quot; id=&quot;name&quot;&gt;&lt;/p&gt;
          &lt;p&gt;type:&lt;input type=&quot;text&quot; id=&quot;type&quot;&gt; &lt;/p&gt;
          &lt;button id=&quot;add&quot;&gt;Add&lt;/button&gt;
      &lt;/body&gt;
  
      &lt;script&gt;
          $(document).ready(function(){
  
              var $items = $('#add');
              var $name = $('#name');
              var $type = $('#type');
              $.ajax({
                                      
                                      url:&quot;https://ecoexchange.dscloud.me:8080/api/get&quot;,
                                  
                                      method:&quot;GET&quot;,
                                      // In this case, we are going to use headers as
                                      headers:{
                                          // The query you're planning to call
                                          // i.e. &lt;query&gt; can be UserGet(0), RecyclableGet(0), etc.
                                          query:&quot;RecyclableGet(0)&quot;,
                                          
                                          // Gets the apikey from the sessionStorage
                                          apikey:sessionStorage.getItem(&quot;apikey&quot;)
                                      },
  
                                      
  
                                      success:function(data, item, xhr,textStatus) {
                                      //console.log(data) 
                                      
                                      $.each(data, function(i, item){
                                          $items.append('&lt;li&gt;name: '+item.Name +', type: '+ item.RecyclableType + '&lt;/li&gt;');
                                      });
  
                                    
                                      },
  
                                      error:function(xhr,textStatus,err) {
                                          console.log(err);
                                      }
                                      });
  
  
  
  
  
                                      $('#add').on('click', function(){
                                          var addRecyclables = {
                                              Name: $name.val,
                                              RecyclableType: $type.val
                                          }
                                      })
                                      $.ajax({
                                          url:&quot;https://ecoexchange.dscloud.me:8080/api/post&quot;,
                                          method:&quot;POST&quot;,
                                          headers:{
                                          // The query you're planning to call
                                          // i.e. &lt;query&gt; can be UserGet(0), RecyclableGet(0), etc.
                                              query:`RecyclableAdd('${name}','${type}')`,
                                          
                                          // Gets the apikey from the sessionStorage
                                          apikey:sessionStorage.getItem(&quot;apikey&quot;)
                                      },
                                      success:function(data, Newitem, xhr,textStatus){
                                          $items.append('&lt;li&gt;name: '+Newitem.Name +', type: '+ Newitem.RecyclableType + '&lt;/li&gt;');
  
                                      },
                                      error:function(xhr,textStatus,err) {
                                          console.log(err);
                                      }
                                      })
          })
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Json file look like
  <a href="https://i.stack.imgur.com/gsyWe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gsyWe.png" alt="image of how json file " /></a></p>
  <p>my html on web
  <a href="https://i.stack.imgur.com/0qWVv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0qWVv.png" alt="400 error " /></a></p>