javascript - 类型错误 :$. ajax 不是一个函数——点击 spring boot @controller 页面的问题

Question

我的项目基于spring boot，Thymeleaf，mysql，html和Jquery。我的场景是获取动态生成的输入框数据和静态输入框数据，需要执行并命中@controller。但是在Jquery脚本ajax中存在问题，在调试时它说类型错误:$.ajax不是jquery的函数.. Here is the Error sample:::场景::::点击提交按钮时，点击基于表单 ID 的函数

socityreg

$("#socityreg").submit(function(event) {
// Prevent the form from submitting via the browser.
event.preventDefault();
ajxPost();
});

它将命中并调用ajxPost();这是完整的完整脚本...

  /**
 * This is for adding input and form sumitting to controller
 * This is used only for adding input field when clicking button
 */

$(document).ready(function() {

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $("#addingInp"); //Fields wrapper
var add_button      = $("#addButton"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true

        $(wrapper).append('<div style="margin-top: 20px" class="form-row">'
                +'<div class"form-group col-md-3">'
                +'<label for="block'+x+'">Block</label>'
                +'<input id="block'+x+'" type="text" name="mytext[]" class="form-control block" placeholder="Enter Name"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="floor'+x+'">No of floors</label>'
                +'<input id="floor'+x+'" type="text" name="mytext[]" class="form-control floor" placeholder="Start (Ex : 1)"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="flats'+x+'">No/Name of flats</label>'
                +'<input id="flats'+x+'" type="text" name="mytext[]" class="form-control flatstart" placeholder="Start (Ex : A or 1)"/>'
                +'<input id="flatsend'+x+'" type="text" name="mytext[]" class="form-control flatend" placeholder="End (Ex : Z or 100)"/>'
                +'</div>'

                    +'<a href="#" class="remove_field col-md-1"> X </a>'
                +'</div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
    //--------------------For Submitting data to controller
var url = window.location;
// SUBMIT FORM
$("#socityreg").submit(function(event) {
    // Prevent the form from submitting via the browser.
    event.preventDefault();
    ajxPost();
});


function ajxPost(){

    var max;
    var blockname=[];
    var floors=[];
    var flatstart=[];
    var flatend=[];

    for(max=1;max<=max_fields;max++)
        {
            blockname[max] = $('#block'+max).val();
            floors[max]=$('#floor'+max).val();
            flatstart[max]=$('#flats'+max).val();
            flatend[max]=$('#flatsend'+max).val();

        }
    var blockListPropSub ={
            blockname,
            floors,
            flatstart,
            flatend
    }

    // PREPARE FORM DATA
    var formData = {
            property_name : $("#propertyname").val(),
            address1 : $("#inputaddress").val(),
            address2 : $("#inputaddress2").val(),
            city:$("#inputcity").val(),
            state:$("#inputstate").val(),
            country:$("#inputcountry").val(),
            zipcode:$("#inputzip").val(),
            blockListPropSub
    }

    // DO POST
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : url+"/savemasterproperty",
        data :JSON.stringify(formData),
        dataType : 'json',
        success : function(result) {
            if(result == "saved"){
                $("#resultid").html("<strong>" +username+ " Registered Successfully!" );
            }else{
                $("#resultid").html("<strong>Error</strong>");
            }

            alert(result.status);
            console.log(result);
        },
        error : function(e) {
            alert("Error!")
            console.log("ERROR: ", e);
        }
    });

    // Reset FormData after Posting
        //resetData();

}

   /* function resetData(){
        property_name : $("").val(),
        address1 : $("").val(),
        address2 : $("").val(),
        city:$("").val(),
        state:$("").val(),
        country:$("").val(),
        zipcode:$("").val(),
        }*/
    });//document.ready ends

使用 Bootstrap 的 HTML 代码

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Vfraternity Socity Registration</title>
<!-- Bootstrap Library CDN link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

</head>
<body>
<!-- Bootstrap/Jquery CDN library files -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- External JQuery Script -->
<script type="text/javascript" src="../js/AddingInput_PropertySocity.js"></script>

<!-- Panel starts -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Socity Registration</h3>
</div>

<div class="panel-body">
<form action="post" role="form" id="socityreg">
<div id="resultid"></div>

<div style="width:900px" class="container-fluid">
  <div class="form-row" id="TextBoxesGroup">
    <div class="form-group col-md-12">
      <label for="propertyname" class="col-form-label">Property</label>
      <input type="text" class="form-control" id="propertyname" placeholder="Property Name">
    </div>

  <div id="addingInp" style="margin-left: 4px;" class="col-md-12">
    <input type='button' class="form-control col-md-4" value='Add Wings/Blocks' id='addButton'>
    </div>

</div>


  <div class="form-group">
    <label for="inputaddress" class="col-form-label">Address</label>
    <input type="text" class="form-control" id="inputaddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputaddress2" class="col-form-label">Address 2</label>
    <input type="text" class="form-control" id="inputaddress2" placeholder="Apartment, studio, or floor">
  </div>


  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputcity" class="col-form-label">City</label>
      <input id="inputcity" class="form-control places" type="text"/>
    </div>
    <div class="form-group col-md-6">
      <label for="inputstate" class="col-form-label">State</label>
      <input id="inputstate" class="form-control place" type="text" />
    </div>

    <div class="form-group col-md-6">
    <label for="inputcountry" class="col-form-label">Country</label>
    <input id="inputcountry" class="form-control place" name="country"/>
    </div>

    <div class="form-group col-md-6">
      <label for="inputzip" class="col-form-label">Zip</label>
      <input id="inputzip" type="text" class="form-control" >
    </div>
  </div>

  <center>
  <button type="submit" class="btn btn-primary">Sign in</button>
  <input type="reset" class="btn btn-primary btn btn-danger"  value="Reset">
  </center>
  </div>

   </div>
</form>
</div>
</div>

</body>
</html>

请帮我解决这个问题...

Answer 1

看来您正在使用jquery-slim doesn't include the ajax module :

Along with the regular version of jQuery that includes the ajax and effects modules, we’re releasing a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code.