title: Send Messages without reload page using ajax in laravel
body: <p>I am working on <strong><code>laravel</code></strong> and I want to send personally messages to the users using blade template. But when I press submit button it gets refreshed/reload the page every time. what to do? and please anyone tell me how to use <strong><code>ajax</code></strong> url, type, data</p>
  
  <p><strong>View file</strong></p>
  
  <pre><code>&lt;form action="{{action('MessageController@sendmessagereply')}}" method="post"&gt;         
              &lt;div class="panel-footer"&gt;
                  &lt;div class="input-group"&gt;
                     &lt;?php if(isset($data)){ ?&gt;
                     &lt;?php for($i=0;$i&lt;count($data);$i++) {?&gt;
                      &lt;input type="hidden" name="_token" value="{{csrf_token()}}"&gt;
                      &lt;input type="hidden" name="id" value="&lt;?php echo $data[$i]-&gt;receivermsgid;?&gt;"&gt;
                      &lt;?php } }?&gt;
                      &lt;input type="text"  name="messages" class="form-control" placeholder="Enter Message" /&gt; 
                      &lt;span class="input-group-btn"&gt;
                         &lt;button class="btn btn-info" type="submit"&gt;SEND&lt;/button&gt;  
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
  </code></pre>
  
  <p><strong>Controller file</strong></p>
  
  <pre><code> public function sendmessagereply(Request $request)
        {
              $post=$request-&gt;all();
              $id=$post['id'];
              $senderid=Session::get('login_userid');
              $receiverid = $id;
              $data=array(
                          'sendermsgid' =&gt; $senderid,
                          'receivermsgid' =&gt; $receiverid,
                          'message'=&gt;$post['messages'],
                          'sdate'=&gt; DB::raw('CURRENT_TIMESTAMP')
                          );
              $messages = DB::table('messages')-&gt;insert($data);
              if($messages){
                  \Session::flash('msg','Your Message Has Been Sent Successfully');
                  return redirect('messageschat/'.$id);
              } else {
                  \Session::flash('msg','Error In Sending Message');
                  return redirect('basicsearch');
              } 
  
          }
  
    //i get the all messages between two users
    public function messageschat($id)
      {      
         $senderid=Session::get('login_userid');
         $result=DB::table('messages')
                    -&gt;join('user_register','messages.sendermsgid','=','user_register.id')
                    -&gt;leftjoin('profilephoto','messages.receivermsgid','=','profilephoto.userid','messages.sendermsgid','=','profilephoto.userid')
                    -&gt;where('sendermsgid', $senderid)-&gt;where('receivermsgid',$receivermsgid)
                    -&gt;orwhere('sendermsgid',$receivermsgid)-&gt;where('receivermsgid',$senderid)
                    -&gt;select('messages.message','messages.sendermsgid','messages.receivermsgid','user_register.first_name as fname','profilephoto.name')
                    -&gt;orderby('messages.sdate')
                    -&gt;get();
  
         $chatdata=DB::table('messages')
                       -&gt;select('messages.message','messages.receivermsgid','messages.sendermsgid')
                       -&gt;where('receivermsgid',$receivermsgid)
                       -&gt;where('sendermsgid',$senderid)-&gt;get();
  
         return view('users.messageschat')-&gt;with('data',$chatdata)-&gt;with('data1',$result);
      }
  </code></pre>
  
  <p><strong>Route file</strong></p>
  
  <pre><code>Route::any('messageschat/{id}','MessageController@messageschat');
  </code></pre>
  
  <p><strong>Javascript file</strong></p>
  
  <pre><code>&lt;script&gt;
  $("#add").click(function() {
  
      $.ajax({
          type: 'post',
          url: 'messageschat/{id}',
          data: {
              '_token': $('input[name=_token]').val(),
              'messages': $('input[messages=messages]').val(),
              'id':$('input[name=_token]').val()
          },
          success: function(data) {
            alert(data)
              if ((data.errors)) {
                  $('.error').removeClass('hidden');
                  $('.error').text(data.errors.name);
              } else {
                  $('.error').remove();
                  $('#table').append("");
              }
          },
      });
      $('#name').val('');
  });
      &lt;/script&gt;
  </code></pre>