A simple example of Ajax in Spring MVC to realize two level linkage

2021-07-01 06:37:37
OfStack

Today, I encountered 2-level linkage in writing the project, and I encountered some problems during the period. Write a blog to record 1.

Background Controller:


@RequestMapping("/faultType")
@ResponseBody
public Map<String,Object> faultType(int id,HttpServletRequest request)throws IOException
{
String ReturnMessage = "";
// Get all subclass fault types 
List<FaultType> fauList=faultTypeService.getById(id);
if(fauList.size()>0){
request.setAttribute("childType", fauList);
ReturnMessage = "OK";
}else {
ReturnMessage = " No information found ";
}


//*************************************************************
Map<String,Object> ReturnMAP = new HashMap<String,Object>();
ReturnMAP.put("childType", fauList);
return ReturnMAP;
}

Front Desk JSP:


<div class="col-sm-3">
<div class="form-group">
<label class="col-3 control-label no-padding-right">
 Fault type:  </label>
<select name="faulttype" id="faulttype" onchange="javascript:typeChange()">
<c:forEach items="${faultlist }" var="faulist">
<option value="${faulist.faultId }">${faulist.faultContent }</option>
</c:forEach>
</select>

</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label class="col-3 control-label no-padding-right">
 Failure:  </label>
<input id="childTypeCont" name="childTypeCont"
value="" type="hidden" class="col-sm-4 form-control" placeholder=" Malfunction ">

<select name="faulttype1" id="faulttype1"">
<option>-- Please select --</option>
<c:forEach items="${childType }" var="faulist">
<option value="${faulist.faultId }">${faulist.faultContent }</option>
</c:forEach>
</select>
</select>
</div>
</div>

JS:


function typeChange(){
var type=$("#faulttype").val();

var html = "<option>-- Please select --</option>"; 
var CommitUrl = "faultType.do?id=" + type;

$.ajax( {
type : "POST",
contentType : "application/json",
url : CommitUrl,
dataType : 'json',
success : function(result){
var Curedata = $.extend(true, [], result); 
if (Curedata.childType != null) { 
for(var i=0;i<Curedata.childType.length;i++){

html+="<option value='"+Curedata.childType[i].faultId+"'>"+Curedata.childType[i].faultContent+"</option>";
}
$("#faulttype1").empty();
$(html).appendTo("#faulttype1") ;

} }
});
}

The following is quoted from others (original address: http://blog.csdn.net/gis__/article/details/6647464)

Those with bad memory can be collected:

1. Drop-down box:


var cc1  = $(".formcselect[@name='country'] option[@selected]").text();// Get the text of the selected item in the drop-down menu ( Notice that there is a space in the middle ) 

var cc2 = $('.formcselect[@name="country"]').val(); // Get the value of the selected item in the drop-down menu  

var cc3 = $('.formc select[@name="country"]').attr("id");// Object for the selected item in the drop-down menu ID Attribute value  

$("#select").empty();// Empty the drop-down box //$("#select").html(''); 

$("<optionvalueoptionvalue='1'>1111</option>").appendTo("#select")// To add a drop-down box option

Explain a little bit:

1. select [@ name= 'country'] option [@ selected] denotes an name attribute,

And the option element with selected attribute in the select element whose attribute value is' country ';

It can be seen that if there is an @ beginning, it means that it is followed by an attribute.

2. Radio boxes:


$("input[@type=radio][@checked]").val(); // Get the value of the selected item in the radio box ( Note that there is no space in the middle ) 

$("input[@type=radio][@value=2]").attr("checked",'checked');// Set radio box value=2 Is selected .( Note that there is no space in the middle )

3. Check Box:


$("input[@type=checkbox][@checked]").val(); // Get the selected number of the check box 1 The value of the item  

$("input[@type=checkbox][@checked]").each(function(){// Due to the check box 1 The general selection is multiple , Therefore, it can be output cyclically  

 alert($(this).val()); 

  }); 

$("#chk1").attr("checked",'');// Unticked  

$("#chk2").attr("checked",true);// Tick  

if($("#chk1").attr('checked')==undefined){} // Determine whether it has been ticked

Of course, the selector of jquery is powerful. There are many ways.


<script src="jquery-1.2.1.js"type="text/javascript"></script> 

<script language="javascript"type="text/javascript"> 

$(document).ready(function(){ 

$("#selectTest").change(function() 

{ 

   //alert("Hello"); 

   //alert($("#selectTest").attr("name")); 

  //$("a").attr("href","xx.html"); 

   //window.location.href="xx.html"; 

  //alert($("#selectTest").val()); 

   alert($("#selectTest option[@selected]").text()); 

   $("#selectTest").attr("value", "2"); 

}); 

}); 

</script> 

 <ahrefahref="#">aaass</a>

< ! --Drop-down box-- >

1. < select id="selectTest"name="selectTest" >
2. < optionvalueoptionvalue="1" > 11 < /option >
3. < optionvalueoptionvalue="2" > 22 < /option >
4. < optionvalueoptionvalue="3" > 33 < /option >
5. < optionvalueoptionvalue="4" > 44 < /option >
6. < optionvalueoptionvalue="5" > 55 < /option >
7. < optionvalueoptionvalue="6" > 66 < /option >
8. < /select >

9. jqueryradio value, checkbox value, select value, radio selected, checkbox selected, select selected, and related to obtain the values of a group of selected items of radio

10.var item = $('input[@name=items][@checked]').val();

11. Get the text of the select selected item

12.var item = $("select[@name=items] option[@selected]").text();

13. The second element of the select drop-down box is the currently selected value

14.$('#select_id')[0].selectedIndex = 1;

15. The second element of the radio radio group is the currently selected value

16.$('input[@name=items]').get(1).checked = true;

17. Get the value:

18. Text box, text area: $("# txt"). attr ("value");

19. Multi-box checkbox: $("# checkbox_id"). attr ("value");

20. Radio Group radio: $("input [@ type=radio] [@ checked]"). val ();

21. Drop-down box select: $('# sel'). val ();

22. Control form elements:

23. Text box, text area: $("# txt"). attr ("value", ''); //Empty the contents

24. $("# txt"). attr ("value", '11'); //Fill in content

25. Multi-box checkbox: $("# chk1"). attr ("checked", ''); //Not ticked

26. $("# chk2"). attr ("checked", true); //Tick

27. if ($("# chk1"). attr ('checked') ==undefined)//Determine if it has been ticked

28. Radio group radio: $("input [@ type=radio]"). attr ("checked", '2'); //Set the item with value=2 as the currently selected item

29. Drop-down box select: $("# sel"). attr ("value", '-sel3'); //Set the project of value=-sel3 to the currently selected item

30. $(" < optionvalueoptionvalue='1' > 1111 < /option > < optionvalueoptionvalue='2' > 2222 < /option > "). appendTo (" # sel ")//ADD

option with drop-down box

31. $("# sel"). empty (); //Empty the drop-down box

32. Get the values of 1 set of radio selected items

33.var item = $('input[@name=items][@checked]').val();

34. Get the text of the select selected item

35.var item = $("select[@name=items] option[@selected]").text();

36. The second element of the select drop-down box is the currently selected value

37.$('#select_id')[0].selectedIndex = 1;

38. The second element of the radio radio group is the currently selected value

39.$('input[@name=items]').get(1).checked = true;

40. Get the value:

41. Text box, text area: $("# txt"). attr ("value");

42. Multi-box checkbox: $("# checkbox_id"). attr ("value");

43. Radio Group radio: $("input [@ type=radio] [@ checked]"). val ();

44. Drop-down box select: $('# sel'). val ();

45. Control form elements:

46. Text box, text area: $("# txt"). attr ("value", ''); //Empty the contents

47. $("# txt"). attr ("value", '11'); //Fill in content

48. Multi-box checkbox: $("# chk1"). attr ("checked", ''); //Not ticked

49. $("# chk2"). attr ("checked", true); //Tick

50. if ($("# chk1"). attr ('checked') ==undefined)//Determine if it has been ticked

51. Radio group radio: $("input [@ type=radio]"). attr ("checked", '2'); //Set the item with value=2 as the currently selected item

52. Drop-down box select: $("# sel"). attr ("value", '-sel3'); //Set the item of value=-sel3 to the currently selected item

53.$(" < optionvalueoptionvalue='1' > 1111 < /option > < optionvalueoptionvalue='2' > 2222 < /option > "). appendTo (" # sel ")//option with a drop-down box

54 $("# sel"). empty (); //Empty the drop-down box