如何在laravel中调用buttonclick的 AJAX 函数?

ff29svar  于 2022-12-27  发布在  其他
关注(0)|答案(5)|浏览(148)

查看代码:

<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);
}
yebdmbv4

yebdmbv41#

在纯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>
nhjlsmyf

nhjlsmyf2#

看起来还行。
在你的成功中设置一个断点,看看数据是什么。
或者创建console.log
米克

ckocjqey

ckocjqey3#

在你的 AJAX 代码中你没有定义dataType,添加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);
     }
});
ugmeyewa

ugmeyewa4#

更新您的代码与下面提到的代码,让我们试试..我会为我工作。

<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>
fumotvh3

fumotvh35#

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<body>
     <div id='msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
     <input type="button" id="ajax_call" value="Replace Message">
</body>
<script>
   $(function () {
      $('#ajax_call').on('click', function () {
         $.ajax({
            type:'POST',
            url:'<?php echo url("/getms"); ?>',
            data:'_token = <?php echo csrf_token() ?>',
            success:function(data){
               $("#msg").html(data.msg);
            },
            complete: function(){
               alert('complete');
            },
            error: function(result) {
               alert('error');
            }
         });
      });
   });
</script>

Jquery onclick函数:未定义jquery onclick函数
另请检查:在onclick事件中未调用函数

相关问题