在使用&"serialize&"时，分别在AJAX中获取表单字段值方法 [英] Getting form field value separately in AJAX while using the "serialize" method

问题描述

我正在使用AJAX处理我的表单数据.我必须为多种形式编写多种功能.但是我在考虑是否可以将单个ajax函数用于来自不同页面的多种表单.例如，当前我正在这样使用它:

// Update Password
$('#updPass').click(function() {
  var form = document.updPass;
  var dataString = $(form).serialize();
  $.ajax({
    type: 'POST',
    url: 'processes/settings.php',
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#updPass").val('Please wait...');
    },
    success: function(html){
      $("#updPass").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

// Add New Room
$('#addRoom').click(function() {
  var form = document.addRoom;
  var dataString = $(form).serialize();
  $.ajax({
    type: 'POST',
    url: 'processes/rooms.php',
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#addRoom").val('Please wait...');
    },
    success: function(html){
      $("#addRoom").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

但是我想这样使用它:

// Perform action
$('#addNew').click(function() {
  var form = document.addNew;
  var dataString = $(form).serialize();
  var formFieldToIdentify = "Take input from 1 hidden form field and store here";
  $.ajax({
    type: 'POST',
    if(formFieldToIdentify == 'password'){
      url: 'processes/settings.php',
    }else{
      url: 'processes/rooms.php',
    }
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#addNew").val('Please wait...');
    },
    success: function(html){
      $("#addNew").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

如何从此处的表单中获取该formFieldToIdentify变量?如果我能够得到它，我可以很容易地使用它.如果我分别收集表单值，则该工作已经完成.但是在这里，我使用的是serialize方法，因此无法单独获取此表单字段值.

解决方案

上一个答案也很好，我只是想清除一下，您不能使用一个函数将数据发送到多个URL.

要将数据发送到多个页面，您需要在ajax中创建嵌套函数，这将在单击相同按钮的情况下启动所有函数.

但是您可以从同一页面或不同页面中的多种形式获取值，而无需每次更改功能，如以下示例所示.

$('#updPass').click(function(e){
    e.preventDefault();
    var url = $(this).attr('action'); //auto detect action url
    var results = [];
    $('form').each(function(){
        results.push($(this).serialize());
        // serializeArray(); is much more suitable
        //results.push($(this).serializeArray());
    });
    $.ajax({
        'url': url,
        'type': 'POST', // type not method
        'data': {data: JSON.stringify(results)},
        'dataType': 'html',
        'success': function (data) {
            console.log(data);
        }
    });
});

请注意，您需要在表单操作中指定网址

php部分的服务器端，

var_dump(json_decode($_POST));
var_dump($_POST);

I am using AJAX to process my form data. I have to write multiple functions for multiple form. But I was thinking if I could use a single ajax function for multiple forms from different pages. For example, currently I am using it like this:

// Update Password
$('#updPass').click(function() {
  var form = document.updPass;
  var dataString = $(form).serialize();
  $.ajax({
    type: 'POST',
    url: 'processes/settings.php',
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#updPass").val('Please wait...');
    },
    success: function(html){
      $("#updPass").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

// Add New Room
$('#addRoom').click(function() {
  var form = document.addRoom;
  var dataString = $(form).serialize();
  $.ajax({
    type: 'POST',
    url: 'processes/rooms.php',
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#addRoom").val('Please wait...');
    },
    success: function(html){
      $("#addRoom").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

But I want to use it like this:

// Perform action
$('#addNew').click(function() {
  var form = document.addNew;
  var dataString = $(form).serialize();
  var formFieldToIdentify = "Take input from 1 hidden form field and store here";
  $.ajax({
    type: 'POST',
    if(formFieldToIdentify == 'password'){
      url: 'processes/settings.php',
    }else{
      url: 'processes/rooms.php',
    }
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#addNew").val('Please wait...');
    },
    success: function(html){
      $("#addNew").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

How to obtain that formFieldToIdentify variable from the form here? If I am able to get it I can use it easily. If I collected the form values separately the job would have been done. But here, I am using the serialize method and hence unable to separately get this form field value.

解决方案

Previus answer is good too, I just wanted to clear that you cant send data to multiple urls with one function.

For sending data to multiple pages you need to created nested functions in ajax, which will start all functions with same button clicked.

But you can get values from multiple forms in same page or in different pages without changing function each time like following example.

$('#updPass').click(function(e){
    e.preventDefault();
    var url = $(this).attr('action'); //auto detect action url
    var results = [];
    $('form').each(function(){
        results.push($(this).serialize());
        // serializeArray(); is much more suitable
        //results.push($(this).serializeArray());
    });
    $.ajax({
        'url': url,
        'type': 'POST', // type not method
        'data': {data: JSON.stringify(results)},
        'dataType': 'html',
        'success': function (data) {
            console.log(data);
        }
    });
});

Note you need to specify url in form action

Server side in php part,

var_dump(json_decode($_POST));
var_dump($_POST);

这篇关于在使用&"serialize&"时，分别在AJAX中获取表单字段值方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！