javascript中没有错误但它不起作用

Question

I use PHP to echo back javascript and html. I am trying to send two values to another PHP file using AJAX with the code echoed back from the original echo. An example of this javascript is:

<script>
                $(document).ready(function () {
                    $('#join_testtest').on('cick', function() {
                        var clubName = $('#join_name_testtest').val();
                        var userName = $('#userName_join').val();

                        $.ajax({
                                  url: 'joinClub.php',
                                  method: 'POST',
                                  data: {
                                      clubName: clubName,
                                      userName: userName
                                  },
                                  success: function(response){
                                        $('#response_join').html(response); 
                                    }, 
                                    dataType: 'text'
                               });

                    });
                });

            </script>

Here is the html code that corresponds to the above example:

<input id='join_testtest' type='button' value='join testtest'>
<input type='text' id='join_name_testtest' style='display:none;' value='testtest'>
<input id='userName_join' style='display:none;' value ='1'>

There are no errors in the console. The PHP will either exit with keyword success or fail but nothing is printed in #response_join. Any help is apreciated.

Answer 1

I noticed your click before your arbitrary function was spelled wrong. I changed Ajax so after it is finished it should log an error. If you’re not getting the error logged, then it’s not getting to the Ajax methods.

I also added FormData object as well.

<script>
    $('document').ready(function () {
        $('#join_testtest').on('click', function() {
            var clubName = $('#join_name_testtest').val();
            var userName = $('#userName_join').val();

            var formData = new FormData();
            formData.append('clubName', clubName);
            formData.append('userName', userName);

            $.ajax({
                url: 'joinClub.php',
                method: 'POST',
                data: formData,
                dataType: 'text'

            }).done(response => {

                $('#response_join').html(response); 

            }).error(error => {
                console.log(error);

            });

        });
    });

</script>

If you can post some more of the code, I think we’re missing something between the DOM elements and jQuery.

Are you using an old version of JQuery?

Where is this script located? At the top or bottom of the page? And is it above or below the jQuery inclusion?

You can also download and test with Postman

You can also change $('#join_testtest').on('click', function() {

with

$('body').on('click', '#join_testtest', function(event){
event.preventDefault();