Question

我有一个表单通过jQuery中的$.post()提交数据。 PHP文件以这种格式返回响应：

header('Content-type: javascript/json');
echo json_encode(['state' => true, 'message' => 'Some Message']);
exit;

编码时效果如此：

{state: true, message: 'Some Message'}

但是，我无法发送表单字段。我尝试使用find()函数，但它在控制台中返回undefined。

这是我的代码：

＆＃13;

$(document).ready(function() {

  var Member = {

    login_form: $('#login'),
    create_form: $('#register'),
    response: false,
    response_message: '',

    login: function() {
      var email = this.login_form.find('input[type=email]').val();
      var password = this.create_form.find('input[type=password]').val();
      this.request('/members/login', {
        email: email,
        password: password
      });
    },
    create: function() {
      var email = this.create_form.find('input[type=email]').val();
      var password = this.create_form.find('input[type=password]').val();
      this.request('/members/create', {
        email: email,
        password: password
      });
    },
    request: function(uri, params) {
      $.post(uri, params)
        .done(function(r) {
          Member.response = r.state;
          if (!r.state) {
            Member.response_message = r.message;
          }
        });
    },
    getEmail: function() {
    	return this.create_form.find('input[type=email]').val();
    },
    getPassword: function() {
    	return this.create_form.find('input[type=password]').val();
    }

  };
  
  $('#submit').click(function() {
  	Member.login();
    console.log('[L_CTRL] Response : ' + Member.response_message);
    console.log('[L_CTRL] Email : ' + Member.getEmail());
    console.log('[L_CTRL] Password : ' + Member.getPassword());
  });

});

＆＃13;

input {
  margin: 5px;
  background: none;
  padding: 5px;
  border: 1px solid #000;
  width: 80%;
}

button {
  padding: 5px;
  border: 1px solid #000;
  background: none;
  cursor: pointer;
}

button:hover {
  background: #000;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h1>
Login
</h1>
<form id='login'>
<input type='email' placeholder='Enter your email address...'>
<input type='password' placeholder='Enter your unique password...'>
<button type='button' id='submit'>
Go
</button>
</form>

＆＃13;

有人能指出我正确的方向来访问输入字段的val()吗？感谢信。

更新：我不想使用其ID直接找到它，即：

$('#email').val();

因为ID可以从表单更改为表单。

Answer 1

将create_form替换为login_form，因为您现在正在选择注册表单，而不是登录表单：

getEmail: function() {
    return this.login_form.find('input[type=email]').val();
  },
  getPassword: function() {
    return this.login_form.find('input[type=password]').val();
  }

完整代码：

  var Member = {

    login_form: $('#login'),
    create_form: $('#register'),
    response: false,
    response_message: '',

    login: function() {
      var email = this.login_form.find('input[type=email]').val();
      var password = this.create_form.find('input[type=password]').val();
      this.request('/members/login', {
        email: email,
        password: password
      });
    },
    create: function() {
      var email = this.create_form.find('input[type=email]').val();
      var password = this.create_form.find('input[type=password]').val();
      this.request('/members/create', {
        email: email,
        password: password
      });
    },
    request: function(uri, params) {
      $.post(uri, params)
        .done(function(r) {
          Member.response = r.state;
          if (!r.state) {
            Member.response_message = r.message;
          }
        });
    },
    getEmail: function() {
    	return this.login_form.find('input[type=email]').val();
    },
    getPassword: function() {
    	return this.login_form.find('input[type=password]').val();
    }

  };
  
  $('#submit').click(function() {
  	Member.login();
    console.log('[L_CTRL] Response : ' + Member.response_message);
    console.log('[L_CTRL] Email : ' + Member.getEmail());
    console.log('[L_CTRL] Password : ' + Member.getPassword());
  });

input {
  margin: 5px;
  background: none;
  padding: 5px;
  border: 1px solid #000;
  width: 80%;
}

button {
  padding: 5px;
  border: 1px solid #000;
  background: none;
  cursor: pointer;
}

button:hover {
  background: #000;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Login
</h1>
<form id='login'>
<input type='email' placeholder='Enter your email address...'>
<input type='password' placeholder='Enter your unique password...'>
<button type='button' id='submit'>
Go
</button>
</form>

Answer 2

您在接收响应之前尝试访问该响应，您应该在成功回调中获取值，请尝试：

.done(function(r) {
  Member.response = r.state;
  if (!r.state) {
    Member.response_message = $.parseJSON(r.message);

    console.log('[L_CTRL] Response : ' + Member.response_message);
    console.log('[L_CTRL] Email : ' + Member.getEmail());
    console.log('[L_CTRL] Password : ' + Member.getPassword());
  }
});

看看How do I return the response from an asynchronous call?。

注意：您需要使用 $.parseJSON() 解析回复：

Member.response_message = $.parseJSON(r.message);

希望这有帮助。

Answer 3

将以下两个功能更改为：

    getEmail: function() {
        console.log();
        return this.login_form.find('input[type=email]').val();
    },
    getPassword: function() {
        return this.login_form.find('input[type=password]').val();
    }

表格如何查找（）电子邮件和密码输入

3 个答案: