如何在laravel中单击按钮时调用ajax函数？答案

【问题标题】：How to call ajax function on buttonclick in laravel?如何在laravel中单击按钮时调用ajax函数？
【发布时间】：2017-11-24 06:36:33
【问题描述】：

查看代码：

<script>
    function getMessage(){
        $.ajax({
           type:'POST',
           url:'/getmsg',
           data:'_token = <?php echo csrf_token() ?>',
           success:function(data){
              $("#msg").html(data.msg);
           }
        });
     }
</script>


<body>
     <div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
     <input type="button" value="Replace Message" onclick='getMessage()'>
</body>

在这里，当我单击按钮时，它应该被其他文本替换。但是点击后什么也没有出现。

控制器代码：

public function index(){
    $msg = "This is a simple message.";
    return response()->json(array('msg'=> $msg), 200);
}

【问题讨论】：

其实这个问题和laravel无关，而是javascript和jquery
我只是用这个来学习ajax
我们可以查看您的路线文件吗？我坚信问题是你没有到达控制器。

标签： ajax laravel

【解决方案1】：

用下面提到的代码更新你的代码，让我们试试..我会为我工作..

    <script type="text/javascript" charset="utf-8">

    $(document).on('click', '#btnSelector', function(event) {
        event.preventDefault();
        /* Act on the event */

        getMessage();

    });
    var getMessage = function(){
        $.ajax({
            type:'POST',
            url:'/getmsg', //Make sure your URL is correct
            dataType: 'json', //Make sure your returning data type dffine as json
            data:'_token = <?php echo csrf_token() ?>',
            success:function(data){
                console.log(data); //Please share cosnole data
                if(data.msg) //Check the data.msg isset?
                {
                    $("#msg").html(data.msg); //replace html by data.msg
                }

            }
        });
    }
 </script>

<body>

    <div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
    <input type="button" value="Replace Message" id='btnSelector'>

</body>

【讨论】：

对不起先生！！什么都没有发生。不知道错在哪里！！
我已经更新了答案...，将 onclick 事件更改为事件监听器...，请尝试...！！也分享给你console.log(data)值...

【解决方案2】：

在您未定义dataType 的ajax 代码中，添加dataType:"json", 以检索json 数据，将您的ajax 代码更改为函数getMessage(){

$.ajax({
     type:'POST',
     url:'/getmsg',
     dataType:'json',
     data:{
         _token = '<?php echo csrf_token() ?>'
     },
     success:function(data){
         $("#msg").html(data.msg);
     }
});

【讨论】：

先生什么都没发生！
@Suryakala 现在检查一下，你没有以正确的方式传递数据
没有错误显示先生！！。它只是显示带有按钮的视图页面。但是当点击按钮时没有发生变化
你在调用你的脚本之前上传了jquery吗？
实际上，我已经从 laravel 教程中获取了这些代码。这里我已经替换了代码 -- 'getMessage()']); ?>-- 使用

【解决方案3】：

看起来不错。

在你的成功中设置一个断点，看看数据是什么。

或者做一个console.log

米克

【讨论】：

设置断点时数据的值是多少？记录到控制台的内容。当您使用浏览器进行调试时，您的 ajax 响应是什么？

【解决方案4】：

在纯 js 中，代码可以正常工作

     function getMessage(){
        alert('Its working!');
     }

<body>
  <div id = 'msg'>This message will be replaced using Ajax. 
     Click the button to replace the message.</div>


  <input type="button" value="Replace Message" onclick='getMessage()'>
</body>

【讨论】：

不！！我需要 ajax 调用
@Suryakala 因此，您在处理 ajax 请求时遇到问题，而不是单击按钮，请在调用中添加错误处理程序并检查异常：error: function(XMLHttpRequest, textStatus, errorThrown) { alert("Status: " + textStatus); alert("Error: " + errorThrown); }