jquery - How do I structure data for POST from form in ReactJS? -

i have basic react component contact form issues post api endpoint (using django rest framework). endpoint handles actual sending, , such.

i'm using jquery handle ajax business -- know overkill; removed later -- can't seem grok how structure values form in component submission endpoint.

here's component:

var contactform = react.createclass({   getinitialstate: function() {     return {       name: '',       email: '',       message: '',       url: '',     };   },   handlenamechange: function (e) {     this.setstate({name: e.target.value})   },   handleemailchange: function (e) {     this.setstate({email: e.target.value})   },   handlemessagechange: function (e) {     this.setstate({message: e.target.value})   },   handleurlchange: function (e) {     this.setstate({url: e.target.value})   },   handleformsubmit: function (e) {     e.preventdefault();     var name = this.state.name.trim();     var email = this.state.email.trim();     var message = this.state.message.trim();     var url = this.state.url.trim();     if (url) {       return;     };     if (!name || !email || !message) {       return;     };     var formdata = {       name: name,       email: email,       message: message     };     this.props.oncontactformsubmit({formdata});     this.setstate({       name: '',       email: '',       message: '',       url: ''     });   },   render: function () {     return (       <form onsubmit={this.handleformsubmit} method="post">         <div>           <label for="id_name">name:</label>           <input onchange={this.handlenamechange} id="id_name" maxlength="200" name="name" type="text" />         </div>         <div>           <label for="id_email">email:</label>           <input onchange={this.handleemailchange} id="id_email" maxlength="254" name="email" type="email" />         </div>         <div>           <label for="id_message">message:</label>           <textarea onchange={this.handlemessagechange} cols="40" id="id_message" name="message" rows="10" />           <span classname="helptext">note: plain text only. html stripped , content escaped on submission.</span>         </div>         <div classname="honeypot">           <label for="id_url">url:</label>           <input onchange={this.handleurlchange} id="id_url" name="url" type="text" />         </div>         <button type="submit" classname="btn btn-default">send</button>       </form>     );   } }); var contactformcontainer = react.createclass({   getinitialstate: function() {     return {data: []};   },   oncontactformsubmit: function (formdata) {     $.ajax({       url: this.props.url,       datatype: 'json',       type: 'post',       data: formdata,       success: function(data) {         console.log('posted correctly', data)       }.bind(this),       error: function(xhr, status, err) {         console.error(this.props.url, status, err.tostring());       }.bind(this)     });   },   render: function () {     return (       <contactform oncontactformsubmit={this.oncontactformsubmit} />     );   } }); var communicationcreateurl = $('#contact_form_container').data('url'); reactdom.render(     <contactformcontainer url={communicationcreateurl} />,     document.getelementbyid('contact_form_container') ); 

this results in dict on django side:

{'formdata[name]': 'patrick', 'formdata[email]': 'patrick@gmail.com', 'formdata[message]': 'this test.'} 

what need this, result of posting request (message=some+test&name=patrick+beeson&email=patrickbeeson%40gmail.com) akin calling serialize() in jquery:

{'name': 'patrick', 'message': 'this test', 'email': 'patrick@gmail.com'} 

what should doing differently?

you can use ajax post send json django , handle arguments dict(). here example:

in browser (jquery/javascript):

    function newmodule() {          var my_data = $("#my_element").val(); // whatever value want sent.          $.ajax({             url: "{% url 'modules' %}",       // handler defined in django urls.              type: "post",                     // method.             datatype: "json",                 // format json (default).             data: {                 path: my_data,                // dictionary key (json).                  csrfmiddlewaretoken:                           '{{ csrf_token }}'   // unique key.             },              success: function (json) {                  // on success this.              },              error: function (xhr, errmsg, err) {                  // on failure this.               }          }); 

in server engine (python):

def handle(request):      # post request containing key.       if request.method == 'post' , 'my_data' in request.post.keys():          # retrieving value.         my_data = request.post['my_data']      # ...