-1
Я работаю над страницей, которая должна включать AJAX для взаимодействия с сервером, и у меня есть некоторые проблемы с выяснением, что делать.Взаимодействие с сервером с использованием AJAX
Вот что должно произойти:
- Создайте форму, которая проверяет в соответствии с набором правил (я сделал это, и он работает должным образом, не буду утомлять вас подробностями, хотя они должны быть четко видны в моем коде, который я буду включать).
- Если форма успешно проходит проверку, следуйте инструкциям по рукоположению подтверждения валидации.
Вот автоматизированные проверки инструкции рукопожатия:
- Если форма была выполнена успешно, необходимо войти на сервер с паролем из формы и с «Логин» параметра. ПРИМЕЧАНИЕ. Единственным паролем, принятым сервером, является 1234
- После этого вы вернетесь к временному ключу, который действителен только на короткое время. Он будет иметь форму «valid:» + ряд чисел и двоеточий.
- После того, как вы получите ключ, отмените «valid:» и отправьте только информацию о состоянии на сервер с ключом с параметром «проверка». В частности, отправьте его следующим образом: stateValue + strippedKey Например, если пользователь выбрал «LA», а возвращаемый «был действителен: 46: 10: 10: 33: 46», то отправьте на сервер «LA46: 10: 10 : 33: 46" .
- После этого сервер отправит обратно ряд цифр и букв
- Используя эти цифры и буквы, которые были отправлены обратно, отправьте их с параметром «отправить», состоянием и именем человека с двоеточием между каждым , Форма сообщит вам, были ли вы успешными или нет.
Я никогда не работал с AJAX раньше, поэтому старался работать вместе с учебником на веб-сайте W3school, но мне трудно понять, как применить его к этим инструкциям.
Вот что у меня есть до сих пор: (большая часть кода AJAX (функция ajax()) была смоделирована после части кода, который наш инструктор написал в классе, однако он прокомментировал часть «login = 1234», поэтому я «м не уверены в синтаксисе, который был там прежде, чем он это сделал)
<html>
<head>
<title>Project 5</title>
</head>
<body>
<form name="myForm" id="myForm" onsubmit="return validateForm()">
First Name: <input type="text" id="name"> <br>
<span id="nameErrMsg" class="error"></span> <br />
Age: <input type="text" id="age"> <br>
<span id="ageErrMsg" class="error"></span> <br />
Street Address: <input type="text" id="address"> <br>
<span id="addressErrMsg" class="error"></span> <br />
State: <select>
<option value="la">LA</option>
<option value="tx">TX</option>
<option value="ok">OK</option>
<option value="mi">MI</option>
<option value="az">AZ</option>
</select> <br>
Login Password: <input type="password" id="password"> <br>
<span id="passwordErrMsg" class="error"></span> <br />
<input type="submit" value="Submit"> <br>
</form>
<script type="text/javascript">
function validateForm() {
var ckName = checkName();
var ckAge = checkAge();
var ckAddress = checkAddress();
var ckPassword = checkPassword();
return ckName && ckAge && ckAddress && ckPassword;
}
function checkName() {
var form = document.myForm;
var fName = form.name.value;
var errMsgHolder = document.getElementById("nameErrMsg");
if(fName.length < 3) {
errMsgHolder.innerHTML = "Please enter a name with at least three letters";
return false;
}
else if(!(/^\S{3,}$/.test(fName))) {
errMsgHolder.innerHTML = "Name cannot contain spaces";
return false;
}
else {
errMsgHolder.innerHTML = " ";
return undefined;
}
}
function checkAge() {
var form = document.myForm;
var personAge = form.age.value;
var ageErr = document.getElementById("ageErrMsg");
if(personAge === "") {
ageErr.innerHTML = "Please enter your age";
return false;
}
else if(/\D/.test(personAge)) {
ageErr.innerHTML = "Please enter a numeric age";
return false
}
else {
ageErr.innerHTML = " ";
return undefined;
}
}
function checkAddress() {
var form = document.myForm;
var strAddress = form.address.value;
var addressErr = document.getElementById("addressErrMsg");
if(strAddress === "") {
addressErr.innerHTML = "Please enter your address";
return false;
}
else if(strAddress.length < 12) {
addressErr.innerHTML = "Address must contain at least 12 characters";
return false;
}
else {
addressErr.innerHTML = " ";
return undefined;
}
}
function checkPassword() {
var form = document.myForm;
var passwd = form.password.value;
var passwordErr = document.getElementById("passwordErrMsg");
if(passwd === "") {
passwordErr.innerHTML = "Please enter your password"
return false;
}
else {
passwordErr.innerHTML = " ";
return undefined;
}
}
function ajax() {
var url = "http://cs.sfasu.edu/rball/351/project5.php";
var request = new XMLHttpRequest();
var passwd = document.getElementById("password").value;
var concat = url+"?"+passwd;
alert("sending:"+concat);
request.open("GET",concat, login=1234");
</script>
</body>
</html>
ли кто-нибудь готов помочь мне точку в правильном направлении?
сделать жизнь проще ~ http://api.jquery.com/category/ajax/ – Phil
* "пытается работать вместе с учебника на сайте W3School" * ~ этот сайт как правило, недовольны сообществом веб-разработчиков. Я предлагаю вам найти лучшие ресурсы. – Phil
@Phil Звучит так, как будто это часть присвоения класса, которая объясняет механизм свертывания аутентификации. –