Home > Developer > Web Develop
My index.jsp .
<body>
<a> point I get Data </a>
<table border=1px>
<tr>
<td>ID</td>
<td> name </td>
<td> Address </td>
</tr>
</table>
</body>
My servlet:
Response.setcontenttype ("Text/html;charset=utf-8");
Request.setcharacterencoding ("Utf-8");
list<user> list = new arraylist<user> ();
for (int i = 1; i < i++) {
List.add (New User (i, "Zhang X" + I, "Beijing" + i + "zone"));
}
String STRs = jsonarray.fromobject (list). ToString ();
PrintWriter Out=response.getwriter ();
Out.print (STRs);
My js:
$ (function () {
$ ("a"). Click (function () {
var tr = $ ("Tr:last");
$.ajax ({
URL: "Servlet/testser",
Type: "POST",
DataType: "JSON",
Success:function (data) {
Data=eval (data);
$.each (data, function () {
var ss = $ ("<tr><td>" + this.id+ "</td><td>" + this.name+ "</td><td>" + this.address+ "</td></tr>");
Tr.after (ss);
TR = SS;
})
}
})
})
});
The data that is taken with $.ajax () is a string, and if the direct loop is not available, there are two ways to solve it:
1: is set dataType: "JSON",
2: data=eval (data), convert data to object.
*************************************************************************************************************** ************
Date control
Just import the js file
<script type= "Text/javascript" src= "Wdatepicker.js" ></script>
Date of birth
<input type= "text" name= "brondate" onclick= "Wdatepicker ()" >
And then add the onClick time on the line !
Form validation :
If you want to modify the error style :
Label.error {
color:red;
font-size:14px;
Background:url (error.jpg) 0px-2px no-repeat;
padding-left:20px;
line-height:20px;
}
To use Validate.js, you must first register the event :
Form . Validate
$ (function () {
$ ("#f"). Validate ({
}
)
})
The label can be directly added class="";
(1) Required:true must lose field
(2) Remote: "check.php" using Ajax method call check.php Validate input value
(3) Email:true must enter the correct format of e-mail
(4) Url:true must enter the correct format of the URL
(5) Date:true must enter the correct format date and date check IE6 error, use with caution
(6) Dateiso:true must enter the correct format for the date (ISO), for example: 2009-06-23, 1998/01/22 only verify the format, do not verify the validity
(7) Number:true must enter a valid number (negative, fractional)
(8) Digits:true must enter an integer
(9) CreditCard: Must enter a valid credit card number
Equalto: The "#field" input value must be the same as #field
(one) Accept: Enter a string with a legal suffix (the suffix of the uploaded file) maxlength:5 The input length is a string of up to 5 (kanji is a character) (Minlength:10) The string with the minimum input length is 10 (Chinese characters are counted as one character) (14 ) rangelength:[5,10] Enter a string that must be between 5 and 10 "(Chinese characters are counted as one character)
(range:[5,10] Input value must be between 5 and 10
(+) Max:5 input value cannot be greater than 5
(min:10) input value cannot be less than 10
Left argument , no value required
For example : I want to verify the mailbox
Email <input type= "text" name= "email" class= "Email" >
If more than one validation is required, you do not have to add a class with a $ ("form"). Validate ({}) method :
$ (function () {
$ ("#f"). Validate ({
validation rules
Rules: {
Field First Name
Password: {
current Field validation rules
required:true,// must be filled
minlength:5,// min. length
Maxlength:10
Maximum length
},
Age: {
Required:true,
digits:true,// can only enter integers
max:100,// Maximum Value
Min:18
Minimum Value
},
Brondate: {
Dateiso:true
},
File: {},
Weight: {
Number:true
},
LoginName: {
Remote: {
Type: "POST",
URL: "Jsonservlet"//servlet
}
}
}
Messages: {firstname: " Please enter name ", email: {
Required: " Please enter the email address ", email: " Please enter the correct email address "
},
Password: {
Required: " Please enter your password ",
Minlength:jQuery.format (" password cannot be less than {0} characters ")
},
Confirm_password: {required: " Please enter a confirmation password ",
MinLength: " Confirm password cannot be less than 5 characters ", Equalto: " two times input password inconsistent inconsistent "
}
}
});
});
*****************************************************************
there are different parameters in validate ({}) , where rules: {} is a validation rule .
Messages: {} can modify the prompt content of the error message !
Form.js form submission , import js
<script type= "Text/javascript" src= "Jquery.form.js" ></script>
The Html code is :
<form action= "Jsonservlet" id= "F" >
<input type= "hidden" name= "id" >
Name
<input type= "text" name= "name" class= "Required" >
<br/>
Age
<input type= "text" name= "age" >
<br/>
Password
<input type= "password" name= "password" >
<br/>
Mailbox
<input type= "text" name= "email" >
<br/>
<input type= "Submit" >
</form>
The JS code is :
(function () {
$ ("#f"). Submit (function () {
serializing a form
var data = $ ("#f"). Formserialize ();
alert (data);
$.ajax ({
URL: "",
Type: "POST",
Data:{name: ""}
Data:data,
Success:function () {
}
});
return false;
});
Register the form as a commit
$ ("#f"). Ajaxform (function (msg) {
Alert (msg);
$ ("[Name=id]"). Val (msg);
});
});
Where the serialized form is equivalent to the name and value of each form label in the form ? after the parameter = value of the way the past was submitted . The following :(ID is hidden field is not assigned )
Id=&name=%e5%bc%a0%e4%b8%89&age=30&password=123456789&email=zs%40qq.com
Then :
Register the form as a commit
$ ("#f"). Ajaxform (function (msg) {
Alert (msg);
$ ("[Name=id]"). Val (msg);
});
You can use the callback function to determine whether there is a registered name , if prompted , If the registration is successful , then jump to the page .
You can also temporarily save the form data into the hidden column, and then submit it when you want to submit !
Ajax and Servlet interaction, form calendar plugin, form validation, form.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
