Как отправить значения из input в cURL запросе к API и получить ответ?

Question

[Dr Zhmurge]

Суть задачи в том, чтобы при заполнении формы пользователем данные которые он ввел в полях Email и Телефон подставлялись в cURL запрос к API в виде: EMAIL=[e-mail]&PHONE=79652224433" и возвращался ответ, есть ли пользователь с такими данными или нет.
Как реализовать чтобы это происходило именно после нажатия кнопки "Подтвердить"?
Какой должен быть обработчик нажатия кнопки подтвердить? И где должен при этом находиться сам cURL запрос?

Comments

[zorca]

JS сам шикарно может отправлять запросы, зачем в этой связке вам нужен cURL? Это серверное приложение.
Используйте например Axios.

[Dr Zhmurge]

zorca, Чтобы не открывать apikey в js коде. В моем понимании тут будет работать связка js и php. JS при отправке формы будет записывать данные из нужных мне полей в переменные, а дальше эти переменные можно будет использовать для того, чтобы отправить cURL запрос к API. Но пока ни малейшего понимание как это работает на практике. Хоть понять бы что почитать, чтобы понимание появилось. cURL запрос у меня отрабатывает нормально, если он просто находится на странице в виде php. Данные в запросе отправляю так: curl_setopt($curl, CURLOPT_POSTFIELDS, "EMAIL=$post_email&PHONE=$post_phone"); Получаю json с ответом. В запросе есть просто для примера заполненные вручную переменные $post_email и $post_phone. Но как это все сделать по нажатию кнопки в форме, ума не приложу.

[Дмитрий]

Егор Плужнов, поменяйте переменные на значения пост

[zorca]

Егор Плужнов, У вас есть ДВА варианта: слать запросы напрямую из JS и слать запросы на некий прокси локальный на PHP, который у вас уже имеется. Для второго варианта вам нужно создать локальный API, который будет принимать только мыло и телефон, после чего отправлять данные на удаленный API с ключом и отдавать вам нужный ответ в форму.
Как-то так:

$(function () {
    $('input.send').on('click', function () {
        var status = $(this).val();
        $.ajax({
            url: '/api/checkform',
            data: {
                text: $("textarea[name=status]").val(),
                status: status
            },
            dataType : 'json'
        });
    });
});

[Dr Zhmurge]

zorca, не могли бы помочь с решением этой задачи? 2 дня мучаюсь. Я в долгу не останусь.

Answer 1

[Dr Zhmurge]

Код который посылает запрос к контроллеру и получает ответ

<script>
	(function($) {
		$(document).ready(function(){
			if( $('#wpforms-form-446').length ) {
				$('#wpforms-submit-446').prop('disabled', true);
				$('#wpforms-446-field_21, #wpforms-446-field_3').change(function(){
					check();
				});
				$('#wpforms-form-446 .wpforms-field-container').append('<div id="errs"></div>');

				$('#wpforms-submit-446').click(function(event){
					if( $('#wpforms-submit-446').prop('disabled') )
						return;

					let email = $('#wpforms-446-field_3').val();
					let phone = $('#wpforms-446-field_21').val();
					let password = $('#wpforms-446-field_4').val();
					let name = $('#wpforms-446-field_1').val();

					if( email.length == 0 || phone.length == 0 )
						return;

					$.ajax({
					  method: "POST",
						dataType : 'json',
					  url: "/api.php?create-user",
					  data: { email: email, phone: phone, password: password, name: name }
					})
				  .success(function( msg ) {
						$('#errs').html('');
						console.log(msg)
				  });
				});

				function check() {
					let email = $('#wpforms-446-field_3').val();
					let phone = $('#wpforms-446-field_21').val();
					if( email.length == 0 || phone.length == 0 )
						return;

					$.ajax({
					  method: "POST",
						dataType : 'json',
					  url: "/api.php?has-user",
					  data: { email: email, phone: phone }
					})
				  .success(function( msg ) {
						$('#errs').html('');
						let b_error = false;
						if( msg.error !== undefined ) {
							let error = msg.error;
							for (var variable in error) {
								b_error = true;
								$('#errs').append('<label class="wpforms-error">'+error[variable]+'</label>');
							}
						}
						else {
							if( msg.result !== undefined && msg.result == true ) {
								b_error = true;
								$('#errs').append('<label class="wpforms-error">Пользователь существует. <a href="https://a-n-h.space/rm_login/">Войти</a></label>');
							}
						}

						if( b_error == false ) {
							$('#wpforms-submit-446').prop('disabled', false);
						}
				  });
				}
			}
		});
	})( jQuery );
</script>

Answer 2

[Владимир Коротенко]

Как то так.

onsubmit (e){
e.preventDefault();
var email = document.getElementById('email')
var phone = document.getElementById('phone')
var url = apiUrl + '?EMAIL=' + email + '&PHONE=' + phone;
$.get(url, function(data){
parseData(data)
});
}

Comments

[edward_freedom]

фроде бы сеньер, а не знаешь, что код надо заключать в теги

Answer 3

[Антон Шаманов]

ajax'ом отправляем данные на контроллер который выполняет запрос к апи и возвращает результат

Comments

[Dr Zhmurge]

Это про контроллер, который mvc?

[Dr Zhmurge]

Кто нибудь мог бы помочь с кодом и объяснить как работает? Я в долгу не останусь.