Question

我正在处理 laravel ，我想使用刀片模板向用户发送个人消息。但是当我按下提交按钮时，它每次都会刷新/重新加载页面。该怎么办？请任何人告诉我如何使用 ajax 网址，输入数据

查看文件

<form action="{{action('MessageController@sendmessagereply')}}" method="post">         
            <div class="panel-footer">
                <div class="input-group">
                   <?php if(isset($data)){ ?>
                   <?php for($i=0;$i<count($data);$i++) {?>
                    <input type="hidden" name="_token" value="{{csrf_token()}}">
                    <input type="hidden" name="id" value="<?php echo $data[$i]->receivermsgid;?>">
                    <?php } }?>
                    <input type="text"  name="messages" class="form-control" placeholder="Enter Message" /> 
                    <span class="input-group-btn">
                       <button class="btn btn-info" type="submit">SEND</button>  
                    </span>
                </div>
            </div>
          </form>

控制器文件

 public function sendmessagereply(Request $request)
      {
            $post=$request->all();
            $id=$post['id'];
            $senderid=Session::get('login_userid');
            $receiverid = $id;
            $data=array(
                        'sendermsgid' => $senderid,
                        'receivermsgid' => $receiverid,
                        'message'=>$post['messages'],
                        'sdate'=> DB::raw('CURRENT_TIMESTAMP')
                        );
            $messages = DB::table('messages')->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')
                  ->join('user_register','messages.sendermsgid','=','user_register.id')
                  ->leftjoin('profilephoto','messages.receivermsgid','=','profilephoto.userid','messages.sendermsgid','=','profilephoto.userid')
                  ->where('sendermsgid', $senderid)->where('receivermsgid',$receivermsgid)
                  ->orwhere('sendermsgid',$receivermsgid)->where('receivermsgid',$senderid)
                  ->select('messages.message','messages.sendermsgid','messages.receivermsgid','user_register.first_name as fname','profilephoto.name')
                  ->orderby('messages.sdate')
                  ->get();

       $chatdata=DB::table('messages')
                     ->select('messages.message','messages.receivermsgid','messages.sendermsgid')
                     ->where('receivermsgid',$receivermsgid)
                     ->where('sendermsgid',$senderid)->get();

       return view('users.messageschat')->with('data',$chatdata)->with('data1',$result);
    }

路线档案

Route::any('messageschat/{id}','MessageController@messageschat');

Javascript文件

<script>
$("#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('');
});
    </script>

Answer 1

只需更改按钮类型以避免默认表单提交并使用ajax

<button class="btn btn-info" type="submit" id="add">SEND</button>

到

<button class="btn btn-info" type="button" id="add">SEND</button>

此外，您发送的数据中还有一些拼写错误

data: {
        '_token': $('input[name="_token"]').val(),
        'messages': $('input[name="messages"]').val(),
        'id':$('input[name="id"]').val()
}

id未在JavaScript中定义，因此ajax网址错误

Answer 2

如果#add是提交按钮ID，那么我相信你必须在ajax调用之前调用preventDefault（）函数`

$("#add").click(function(e) {
e.preventDefault();
    $.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('');
});

加上你忘了将id添加到btn

Answer 3

要使用ajax提交HTML表单，首先需要禁用完整的重新加载提交。为此，在您的代码中进行以下修改 -

使用此 -

<button class="btn btn-info" type="button" id="add">SEND</button>

而不是 -

<button class="btn btn-info" type="submit" id="add">SEND</button>

的JavaScript -

event.preventDefault();将停用基于表单提交的默认整页重新加载，并允许您创建一个ajax请求，将您的有效负载传递给MessageController@messageschat控制器。

$("#add").click(function(event) {
    //Preventing the default form submission
    event.preventDefault();
    $.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('');
}

Answer 4

您需要确保未提交表单。这可以是preventDefault()或返回false。另外，我更喜欢在提交表单时使用submit()作为回调。

$('form').submit(function (e) {
    e.preventDefault(); // prevent default behaviour

    ...

    return false; // return false to be sure
});

此外，我应该启用＆＃34;保留日志＆＃34;在您的控制台中，在页面刷新之前查看所有错误。

使用laravel中的ajax在不重新加载页面的情况下发送消息

4 个答案:

的JavaScript -