jQuery AJAX POST sans les éléments de formulaire?

Je n'ai pas beaucoup d'expérience avec des appels AJAX, mais mon exemple semble simple (sauf que je ne suis pas à l'aide d'un élément) et il me fait me demander si je suis en train de faire l'appel de mal, ou si vous ne pouvez pas faire une requête AJAX POST sans une forme.

Mon code HTML du bouton que j'utilise est: est-ce

<button class="btn btn-primary btn-small" id='saveAsNewName' onclick=saveAsNewName()>Save As</button>

Mon JS:

function saveAsNewName(str, id) {
var values = {
        'str'       : str,
        'id'        : id,
};
$.ajax({
    url: "saveAsNewName.php",
    type: "POST",
    data: values,
    dataType: 'JSON',
    success: function(data){
        alert("success" + data);
    }
})
.done(function(data) {
    alert("success" + data);
})
.fail(function(data) {
    alert("failure" + data);
});
}

Et, pour l'instant, mon php est, tout simplement, ce pour tester si cela fonctionne:

echo json_encode($_POST['id']));

Je reçois la notification de défaillance à chaque fois que je clique sur mon bouton. Est-t-il une solution de contournement j'ai besoin pour ne pas utiliser un formulaire, ou suis-je nettoie la base .ajax exemple?

Modifier, pour être clair: je suis en utilisant un autre ensemble de jQuery pour mettre à jour en permanence teh arguments pour saveAsNewName(). Le résultat est un appel comme:

onclick="saveAsNewName("wheyjuice 555", "33541")"

comme un résultat de cette jQuery code:

$(document).on('keyup',"[class*=editSimNameField]", function() { 
    var newText = $(this).val(); var id = $(".loadWindow").val();       
    $("#saveAsNewName").attr('onclick', 'saveAsNewName(\"' + newText + '\", \"' + id + '\")'); 
});
Où est-il l'obtention de la str et id info?
ajouté ça à l'OP. Oublié que c'est mis à jour dynamiquement via jquery

OriginalL'auteur bo_knows | 2014-06-02

  1. 10

    Vous n'êtes pas en passant tout le long de votre saveAsNewName() fonction dans le onclick, vous êtes juste à l'exécution de la fonction. Par conséquent, str et id sont les valeurs null.

    Comment quelque chose comme cela, où que vous obtenir les valeurs des éléments en ID:

    function saveAsNewName() {
    var values = {
            'str': document.getElementById('elem1').value,
            'id': document.getElementById('elem2').value
    };
    $.ajax({
        url: "saveAsNewName.php",
        type: "POST",
        data: values,
    });

    ...

}

    Évidemment, il existe d'innombrables autres façons d'obtenir les valeurs.

    Aussi, vous pouvez POSTER une URL indépendamment de balisage HTML, un formulaire, etc.

    Edit: de Voir votre commentaire à propos de la mise à jour de la onclick attribut de manière dynamique, je vous recommande de faire 2 choses qui vont vous permettre de résoudre ce problème sur votre propre. Ces notes sont pour Chrome, mais fonctionnent de la même façon dans Firefox via Firebug.

    1) Utiliser le console.log() fonction values pour vérifier que vous êtes d'envoyer les données de votre fonction que vous pensez que vous envoyez. E. g. console.log(values), puis cochez la console dans les outils de développement.

    2) Ouvrir les outils de développement et de l'utilisation de la réseau onglet pour inspecter l'appel AJAX. Vous pouvez réellement voir l'appel se produire en temps réel et peut l'inspecter pour voir quelles données ont été envoyés et que des données ont été reçues.

    Je suis désolé, j'ai oublié d'ajouter qu'en raison de la nature dynamique de la façon dont cette fonction est appelée, je suis continuellement mise à jour de la valeur transmise dans cette fonction. $(document).('keyup',"[class*=editSimNameField]", function() { var newText = $(this).val(); var id = $(".loadWindow").val(); $("#saveAsNewName").attr('onclick', 'saveAsNewName(\"' + newText + '\", \"' + id + '\")'); });
    Ajoutez-le à votre question en tant que code.
    L'appel de grande sur l'onglet Réseau. Je n'ai jamais réellement utilisé. Bien sûr, si vous regardez le code PHP dans l'OP, il y a un supplément de fermer les parenthèses dans: echo json_encode($_POST['id'])); je n'y arrivais pas parce que je ne voyais pas la réponse. Putain de fou. Merci!!!!
    De la beauté! Intime avec l'onglet réseau, les paramètres de la demande, la demande et les en-têtes de réponse, etc. C'est tout bon!

    OriginalL'auteur Charlie Schliesser

  2. 0

    Les valeurs d'un formulaire ne sont pas nécessaires, mais le problème commence ici:

    onclick=saveAsNewName()

    Voir, c'est en passant pas les valeurs pour id et str dans l'appel. L'argument le tableau est vide, alors vous allez avoir à trouver un moyen de passer. Une façon de le faire est un gestionnaire de soumission:

    $('#myForm').submit(function() {
    var form = $(this);
    //So logic here
    var id = $('#id', form).val();
    var str = 'something';
    saveAsNewName(id, str);
    return false;
});

    Une autre façon de faire est de simplement ajouter des sélecteurs à l'intérieur de saveAsNewName que les valeurs d'extraction pour id et str à partir d'autres parties du document.

    J'ai oublié de mentionner dans l'OP que j'ai jquery continuellement mise à jour de ce domaine, sur la base de ce que l'utilisateur clique sur un menu. Donc, quand j'ai vérifier le code HTML pour que lors de son utilisation, je vois thigns comme onclick="saveAsNewName("wheyjuice 555", "33541")"

    OriginalL'auteur Mike Thomsen